L'elemento canvas e le canvas API (parte 3) - Gradienti, ombreggiature, trasformazioni
Proseguiamolo studio delle canvas di HTML% parlando di gradienti, ombreggiature e trasformazioni.
Gradienti
Per colorare il piano cartesiano della lezione precedente ho utilizzato un gradiente lineare, vediamo nel dettaglio tutte le possibilità che vengono offerte per definire gradienti:
gradient = context.createLinearGradient(x0, y0, x1, y1)
Restituisce un oggetto CanvasGradient che rappresenta un gradiente lineare che colora la linea definita dalle coordinate passate come parametri.
gradient = context.createRadialGradient(x0, y0, r0, x1, y1, r1)
Restituisce un oggetto CanvasGradient che rappresenta un gradiente radiale che colora il cono rappresentato dal cerchio definito dai parametri in input.
gradient.addColorStop(offset, color)
Aggiunge un colore al gradiente (color, esadecimale/stringa/rgb) all'offset indicato (da 0.0 inizio gradiente sino a 1.0 fine gradiente).
Definito un gradiente è sufficiente assegnarlo al fillStyle del contesto e chiamare la funzione fill() per applicarlo.
Altra area di applicazione delle canvas APIs sono le immagini. Possiamo caricare immagini preesistenti e modificarle. Le APIs offrono alcune interessanti funzionalità, applichiamone qualcuna in un esempio:
<!doctype html>
<html>
<head>
<title>Immagini e canvas</title>
<script src="jquery.js"></script>
<script>
// # Al DOM Ready
$(function() {
// # Ottengo l'oggetto relativo al canvas
var canvasObj = document.getElementById("c_area");
context = canvasObj.getContext("2d"); // recupero il contesto
// # Istanzio l'oggetto immagine
var immagine = new Image();
// # l'immagine è sul filesystem
immagine.src = "canvasimage.png";
// # al caricamento disegno l'immagine alle coordinate indicate, con dimensioni 182x173
immagine.onload = function() {
context.drawImage(immagine, 50, 40, 182, 173);
}
// # Applico una ombreggiatura
context.shadowOffsetX = 6;
context.shadowOffsetY = 6;
context.shadowBlur = 5;
context.shadowColor = "#333";
// # ridimensiono l'immagine al 60% delle dimensioni originali
context.scale(0.6, 0.6);
});
</script>
</head>
<body>
<article>
<canvas id="c_area" height="300px">Impossibile mostrare il canvas</canvas>
</article>
</body>
</html>Ecco l'immagine originale:
ed il risultato delle elaborazioni:
Ombreggiature
Nell'esempio abbiamo applicato una ombreggiatura, per definirla abbiamo a disposizione quattro proprietà :
- context.shadowColor [ = valore]: getter/[setter] per definire il colore dell'ombra.
- context.shadowOffsetX [ = valore]: getter/[setter] per definire l'offset sul piano delle ascisse (orizzontale) dell'ombra.
- context.shadowOffsetY [ = valore]: getter/[setter] per definire l'offset sul piano delle ordinate (verticale) dell'ombra.
- context.shadowBlur [ = valore]: getter/[setter] per definire il grado di sfocamento dell'ombra.
Trasformazioni
Ho introdotto nell'esempio anche una semplice trasformazione, ottenuta attraverso il metodo scale (ridimensiona), nel draft vengono descritti e resi disponibili nelle APIs i seguenti metodi:
- context.scale(x, y): ridimensiona l'immagine secondo i parametri forniti; x è il ratio orizzontale, y quello verticale.
- context.rotate(angle): applica una rotazione (l' angolo è in radianti).
- context.translate(x, y): trasla l'immagine in accordo con i parametri forniti; x è lo spostamento orizzontale, y quello verticale.
- context.trasform(a, b, c, d, e, f) (notazione alternativa dei parametri: m11, m12, m21, m22, dx, and dy): modifica la matrice di trasformazione esistente moltiplicandola per la matrice formata dai parametri spediti in input.
La matrice è una 3x3 così composta
a c e
b d f
0 0 1. - context.setTransform(a, b, c, d, e, f): resetta la matrice alla matrice di identità, poi effettua una chiamata al metodo transform con i parametri passati in input.
