Il sito per imparare gratuitamente a fare pagine Web

canvas forme HTML5

Questa guida è stampabile in modo agevole dalla sua apposita voce: "Download PDF", presente nel menù laterale:
 


Andrea Bianchi © www.web-link.it   Guida HTML 5 - Ver. 1.1.1 

Nella lezione precedente abbiamo visto che cosa Ŕ un canvas e quali sono le istruzioni javascript per poterlo gestire, adesso vediamo come fare per disegnare al suo interno una linea retta che lo attraversa in diagonale, per farlo ci posizioniamo in alto a sinistra moveTo(0,0) e tracciamo una linea fino al punto (250,150) praticamente le dimensioni max del nostro canvas e la rendiamo visibile con stroke().


<canvas id="wl" width="250" height="150" style="border: 1px solid #000;">
Il tuo browser non supporta canvas di html5
</canvas>
<script>
var weblink = document.getElementById("wl");
var context = weblink.getContext("2d");
context.beginPath();
context.moveTo(0,0);
context.lineTo(250,150);
context.closePath();
context.stroke();
</script>


Il tuo browser non supporta canvas di html5

Questa la spiegazione dei comandi adoperati:

 

beginPath()

Il metodo beginPath() pu˛ essere usato ogni volta che si inizia a disegnare un nuovo tracciato, formato da line, archi, cerchi: lineTo (), arcTo (), quadraticCurveTo (), bezierCurveTo ().

context.beginPath();




su
 

closePath()

Il metodo closePath() pu˛ essere usato ogni volta che si finisce di disegnare un nuovo tracciato, formato da line, archi, cerchi: lineTo (), arcTo (), quadraticCurveTo (), bezierCurveTo ().

context.closePath();




su
 

moveTo(x,y)

Il metodo moveTo(x,y) posiziona la punta della matita nel punto da cui iniziare il disegno. I valori associabili alle sue variabili: x, y sono espressi in pixel e si riferiscono alla posizione rispetto ai margini del canvas.

context.moveTo(0,0);




su
 

lineTo(x,y)

Il metodo lineTo(x,y) disegna la linea fino al punto specificato. I valori associabili alle sue variabili: x, y sono espressi in pixel e si riferiscono alla posizione di fine linea rispetto ai margini del canvas.

context.lineTo(250,150);




su
 

strokeStyle

La proprietÓ strokeStyle Ŕ il colore dell'inchiostro ed Ŕ opzionale, assegna a stroke() un colore diverso da quello di default, nell'esempio il rosso corrispondente al codice esadecimale #ff0000".

context.strokeStyle = "#ff0000";




su
 

stroke()

Il metodo stroke() Ŕ l'inchiostro, praticamente rende visibile tutto quello che Ŕ stato disegnato, senza questo metodo, risulterebbe invisibile. strokeStyle Ŕ opzionale ed assegna un colore diverso da quello di default.

context.stroke();




su
 

fillStyle

La proprietÓ fillStyle pu˛ rappresentare un colore, una sfumatura, un pattern. Il valore predefinito Ŕ il colore nero.

context.fillStyle="#009900";




su
 

fill()

Il metodo fill() riempie la forma col colore definito con fillStyle.

context.fill();




su

Con la stessa identica tecnica si possono disegnare un sacco di altre cose che il canvas permette di fare, magari un cerchio, pieno o vuoto, un rettangolo, o del testo, ecc.

 

arc(x,y,r,start,stop)

Il metodo arc(x,y,r,start,stop) disegna un arco che se fatto girare tutto intorno diventa un cerchio. Accetta il punto centrale(x,y) il raggio(r), un angolo di partenza(start) ed uno di arrivo(stop) in radianti, ed opzionalmente false per il senso orario o true per quello antiorario. Nell'esempio sotto per calcolare i radianti Ŕ stato utilizzato il modulo Math di Javascript.

<canvas id="wl" width="250" height="150" style="border: 1px solid #000;">
Il tuo browser non supporta canvas di html5
</canvas>
<script>
var weblink = document.getElementById("wl");
var context = weblink.getContext("2d");
context.beginPath();
context.arc(50,50,30,0,Math.PI*2,false);
context.closePath();
context.strokeStyle = "#006600";
context.stroke();
</script>


Il tuo browser non supporta canvas di html5

Con arc Ŕ stato tracciato un cerchio in un punto specificato del canvas e con un determinato raggio, strokeStyle definisce il colore della matita, in questo caso il verde, stroke() ha disegnato il cerchietto verde.

C'Ŕ anche la possibilitÓ di riempire la forma disegnata usando fill() e fillStyle descritti sopra. Nell'esempio sotto si adopera un colore a tinta unita ma avrebbe potuto essere uno sfondo o qualsiasi altra cosa ammessa.

<script>
var weblink = document.getElementById("wl");
var context = weblink.getContext("2d");
context.beginPath();
context.arc(50,50,30,0,Math.PI*2,false);
context.closePath();
context.fillStyle="#ff0000";
context.fill();

context.strokeStyle = "#006600";
context.stroke();
</script>


Il tuo browser non supporta canvas di html5

La matita che ha disegnato il cerchio Ŕ di colore verde ed il riempimento dello stesso Ŕ di colore rosso.



su
 

rect(x,y,width,height)

Il metodo rect(x,y,width,height) disegna un rettangolo o un quadrato, x e y sono espressi in pixel e si riferiscono alla posizione di inizio (angolo superiore sinistro della forma) rispetto ai margini del canvas, mentre width ed heigth sono le dimensioni in larghezza ed altezza.

<canvas id="wl" width="250" height="150" style="border: 1px solid #000;">
Il tuo browser non supporta canvas di html5
</canvas>
<script>
var weblink = document.getElementById("wl");
var context = weblink.getContext("2d");
context.beginPath();
context.rect(25,25,100,70);
context.closePath();
context.strokeStyle = "#006600";
context.stroke();
</script>


Il tuo browser non supporta canvas di html5

Con rect Ŕ stato tracciato un rettangolo in un punto specificato del canvas e con determinate dimensioni, strokeStyle definisce il colore della matita, in questo caso il verde, stroke() ha disegnato il rettangolo verde.

C'Ŕ anche la possibilitÓ di riempire la forma disegnata usando fill() e fillStyle descritti sopra. Nell'esempio sotto si adopera un colore a tinta unita ma avrebbe potuto essere uno sfondo o qualsiasi altra cosa ammessa.

<script>
var weblink = document.getElementById("wl");
var context = weblink.getContext("2d");
context.beginPath();
context.rect(25,25,100,70);
context.closePath();
context.fillStyle="#ff0000";
context.fill();

context.strokeStyle = "#006600";
context.stroke();
</script>


Il tuo browser non supporta canvas di html5

La matita che ha disegnato il rettangolo Ŕ di colore verde ed il riempimento dello stesso Ŕ di colore rosso.



su
 

fillRect(x, y, width, height)

Il metodo fillRect(x, y, width, height) disegna un rettangolo giÓ riempito del colore definito con fillStyle. I valori associabili alle sue variabili: x, y, width ed height sono espressi in pixel e si riferiscono alla sua posizione rispetto al margine del canvas e alle sue dimensioni.

<canvas id="wl" width="250" height="150" style="border: 1px solid #000;">
Il tuo browser non supporta canvas di html5
</canvas>
<script>
var weblink = document.getElementById("wl");
var context = weblink.getContext("2d");
context.beginPath();
context.fillStyle="#99cc66";
context.fillRect(50,35,150,80);
context.closePath();
</script>


Il tuo browser non supporta canvas di html5

Si noti la mancanza del tratto della matita vista sopra per il contorno della forma.



su

Esercitatevi, il meccanismo Ŕ molto semplice nella sua logica, una volta compreso sarÓ possibile fare anche molto altro che vedremo nella lezione successiva che spiega come usare immagini all'interno di un canvas.



Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.

Forum di web-link


Andrea Bianchi