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().
Il tuo browser non supporta canvas di html5
</canvas>
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>
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 ().
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 ().
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.
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.
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″.
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.
fillStyle
La proprietà fillStyle può rappresentare un colore, una sfumatura, un pattern. Il valore predefinito è il colore nero.
fill()
Il metodo fill() riempie la forma col colore definito con fillStyle.
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.
Il tuo browser non supporta canvas di html5
</canvas>
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>
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.
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>
La matita che ha disegnato il cerchio è di colore verde ed il riempimento dello stesso è di colore rosso.
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.
Il tuo browser non supporta canvas di html5
</canvas>
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>
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.
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>
La matita che ha disegnato il rettangolo è di colore verde ed il riempimento dello stesso è di colore rosso.
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.
Il tuo browser non supporta canvas di html5
</canvas>
var weblink = document.getElementById(“wl”);
var context = weblink.getContext(“2d”);
context.beginPath();
context.fillStyle=”#99cc66″;
context.fillRect(50,35,150,80);
context.closePath();
</script>
Si noti la mancanza del tratto della matita vista sopra per il contorno della forma.
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.