Linea su Canvas HTML

实例

// Crea il canvas:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Definisci un nuovo percorso:
ctx.beginPath();
// Definisci il punto di partenza:
ctx.moveTo(0, 0);
// Definisci il punto di arrivo:
ctx.lineTo(200, 100);
// Disegno:
ctx.stroke();

Prova tu stesso

Disegno di linee Canvas

La linea di disegno utilizza il percorso nel canvas:

Metodo

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

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

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

Il metodo stroke() disegna effettivamente la linea. Il colore predefinito è nero.

Attributo lineWidth

L'attributo lineWidth definisce la larghezza della linea utilizzata per disegnare sul canvas.

Deve essere impostato prima di chiamare il metodo stroke().

实例

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.stroke();

Prova tu stesso

Attributo strokeStyle

L'attributo strokeStyle definisce lo stile utilizzato per disegnare sul canvas.

Deve essere impostato prima di chiamare il metodo stroke().

实例

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();

Prova tu stesso

Attributo lineCap

L'attributo lineCap definisce lo stile della estremità della linea (butt, round o square).

Di default è quadrato (quadrato).

Deve essere impostato prima di chiamare il metodo stroke().

实例

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(175,75);
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();

Prova tu stesso

Vedi anche:

Manuale completo di Canvas di CodeW3C.com