Forma HTML Canvas

istanza

esempio 1

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

Prova tu stesso

Disegno delle linee Canvas

le linee di disegno utilizzano il percorso del canvas:

il metodo

beginPath() il metodo inizia una nuova percorso. Non disegna nulla, ma solo definisce un nuovo percorso.

moveTo() definisce il punto di partenza della linea. Non disegna nulla, ma solo imposta un punto di partenza.

lineTo() il metodo definisce il punto finale della linea. Non disegna nulla, ma solo imposta un punto finale.

stroke() il metodo disegna effettivamente le linee. Il colore di default del tratto è nero.

più esempi

esempio 2

ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();

Prova tu stesso

esempio 3

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

Prova tu stesso

suggerimento

se vuoi disegnare un rettangolo, non devi disegnare 4 linee.

nel prossimo capitolo, imparerai a usare drawRect() metodo per disegnare un rettangolo.

proprietà strokeStyle

strokeStyle le proprietà sono definite nel canvas per disegnare lo stile utilizzato.

deve essere chiamato stroke() impostalo prima del

istanza

ctx.beginPath();
// definisci un rettangolo
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// definisci un triangolo
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "red";
ctx.stroke();

Prova tu stesso

Vedi anche:

Manuale completo di Canvas su CodeW3C.com