HTML Canvas Lijnen

实例

// Maak canvas aan:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Definieer een nieuw pad:
ctx.beginPath();
// Definieer het startpunt:
ctx.moveTo(0, 0);
// Definieer het eindpunt:
ctx.lineTo(200, 100);
// Tekenen:
ctx.stroke();

Probeer het zelf

Canvas lijn tekenen

Lijn tekenen maakt gebruik van de pad in het canvas:

Methode

De beginPath() methode begint een nieuwe pad. Het tekent niets, het definieert alleen een nieuw pad.

De moveTo() methode definieert het startpunt van de lijn. Het tekent niets, het stelt alleen een startpunt in.

De lineTo() methode definieert het eindpunt van de lijn. Het tekent niets, het stelt alleen een eindpunt in.

De stroke() methode tekent de lijn daadwerkelijk. De standaard penkleur is zwart.

lineWidth eigenschap

De lineWidth eigenschap definieert de lijnhoogte die wordt gebruikt bij het tekenen op het canvas.

Het moet worden ingesteld voordat de stroke() methode wordt aangeroepen.

实例

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

Probeer het zelf

strokeStyle eigenschap

De strokeStyle eigenschap definieert de stijl die wordt gebruikt bij het tekenen op het canvas.

Het moet worden ingesteld voordat de stroke() methode wordt aangeroepen.

实例

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

Probeer het zelf

lineCap eigenschap

De lineCap eigenschap definieert de stijl van de lijnuiteinden (butt, round of square).

Standaard is dit square (vierkant).

Het moet worden ingesteld voordat de stroke() methode wordt aangeroepen.

实例

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

Probeer het zelf

Zie ook:

Volledige Canvas Referentie Handleiding van CodeW3C.com