Le immagini con Canvas (prima parte)

Il Canvas è un nuovo elemento di HTML5  rappresentato dal tag <canvas>, che ci permette di avere “ un’ area da disegno ” nella quale creare o modificare elementi grafici con Javascript.

Potremmo definire questo elemento come  un riquadro, una tela trasparente, dove andare a disegnare linee, quadrati, cerchi, rettangoli ed altre figure.

Vediamo ora come creare in una pagina html una semplice area di disegno:

[code lang=”html”]

<canvas id="my_canvas">
Canvas non supportato.
</canvas>

[/code]

Di default le dimensioni dell’area di lavoro sono di larghezza 300px e altezza 150px, ma possono essere cambiate aggiungendo gli attributi width ed height all’elemento. Per verificare se il browser non supporta il Canvas, si può inserire un testo fra i tag di apertura e chiusura, che verra’ visualizzato appunto, nel caso il browser non lo supporti.

Adesso possiamo vedere subito un semplice esempio sull’utilizzo del Canvas:

[code lang=”html”]
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio Canvas</title>
<style>
#my_canvas{width:350px;height:200px;background:#b7b7b7}
</style>
</head>
<body>
<canvas id="my_canvas">
Canvas non supportato.
</canvas>
<script type="text/javascript">
var canvas=document.getElementById(‘my_canvas’);
var context=canvas.getContext(‘2d’);
context.fillStyle=’red’;
context.fillRect(30,30,120,70);
</script>
</body>
</html>

[/code]

Abbiamo richiamato il contesto del disegno con l’oggetto getContext che ha molte proprieta’ e metodi per poter disegnare. Con la proprieta’ fillStyle abbiamo impostato il colore per il riempimemto  mentre con il metodo fillRect() abbiamo creato un rettangolo largo 120, alto 70 e posizionato ad una distanza di 30 rispetto al vertice alto sinistro dell’area di disegno.

Il risultato sara’ il seguente:

canvas_example1

Path

Vediamo adesso un altro esempio per tracciare un Path (un percorso, tracciato) creando linee, archi, cerchi. Ogni volta che che iniziamo a disegnare un nuovo tracciato occorre usare il metodo beginPath() :

[code lang=”html”]
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio Canvas</title>
<style>
#my_canvas{width:450px;height:200px;background:white}
</style>
</head>
<body>
<canvas id="my_canvas">
Canvas non supportato.
</canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById(‘my_canvas’);
if (canvas.getContext) {
var context = canvas.getContext(‘2d’);
context.beginPath();
context.moveTo(10, 25);
context.lineTo(90, 120);
context.lineTo(105, 70);
context.quadraticCurveTo(140, 190, 160, 120);
context.bezierCurveTo(200, -30, 200, 170, 295, 120);

context.lineWidth = 3;
context.strokeStyle = ‘green’;
context.stroke();
}
};
</script>
</body>
</html>
[/code]

Il risultato di questo secondo esempio:

Facciamo una panoramica sui metodi e le proprietà utilizzati nell’esempio.

beginPath()

Come gia’ detto viene chiamato all’inizio della creazione di un tracciato.

moveTo(double x,double y)

Usando questo metodo abbiamo la posizione da cui parte il nostro tracciato. Possiamo immaginare un cursore posizionato alle coordinate x e y rispetto al vertice sinistro dell’area di disegno.

lineTo(double x,double y)

Con il metodo lineTo() tracciamo una linea che parte appunto dalla posizione del punto identificato con moveTo() e che termina alle coordinate x e y.

quadraticCurveTo(double cx1, double cy1, double x, double y)

Permette di creare una curva di Bezier Quadratica che ha inizio dall’ ultimo punto del sottopercorso e  fine  al punto specificato dalle coordinate x ed y. I valori di cx e cy  permettono di posizionare un punto di controllo  necessario per il tracciamento di una curva quadratica.

bezierCurveTo(double cx1, double cy1, double cx2, double cy2, double x, double y)

Simile al precedente, permette di creare una curva di Bezier Cubica, ma necessita di un ulteriore punto di controllo.

stroke()

Usiamo il metodo stroke() per rendere visibile il tracciato disegnato.

lineWidth 

Impostimamo lo spessore del tracciato

strokeStyle

Diamo il colore al tracciato.

Il risultato di questo secondo esempio sarà il seguente:

canvas_example2

Disegno di circonferenze

Andiamo a descrivere un altro metodo importante  dell’oggetto getContext, che ci permette di disegnare archi e circonferenze:

  arc(x, y, radius,angleS, angleE, counterclockwise)

Vediamo la definizione dei sui parametri:

  • x e y definiscono la distanza del centro dell’arco rspetto al magine alto sinistro del Canvas.
  • radius è il valore del raggio.
  • angleSangleE sono rispettivamente  gli angoli di inizio e fine del tracciato.
  • counterclockwise è un valore booleano che definisce se il senso è  orario (false) oppure antiorario (true).

Termino qui  l’articolo sperando che sia stato di vostro interesse. Vi aspetto per la seconda parte in cui tratteremo le animazioni con Canvas.

Lascia un commento