HTML Canvas Lines

实例

// Opret canvas:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Definer en ny sti:
ctx.beginPath();
// Definer startpunkt:
ctx.moveTo(0, 0);
// Definer målpunkt:
ctx.lineTo(200, 100);
// Tegning:
ctx.stroke();

Prøv det selv

Canvas linjetegning

Linjetegning bruger stien i canvas:

metode

beginPath() metoden starter en ny sti. Den tegner ikke noget, den definerer kun en ny sti.

moveTo() definerer linjens startpunkt. Den tegner ikke noget, den sætter kun et startpunkt.

lineTo() metoden definerer linjens endepunkt. Den tegner ikke noget, den sætter kun et endepunkt.

stroke() metoden tegner effektivt linjen. Standard farve er sort.

lineWidth egenskab

lineWidth egenskaben definerer stregbredden, der skal bruges til at tegne på canvas.

Det skal indstilles før stroke() metoden kaldes.

实例

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

Prøv det selv

strokeStyle egenskab

strokeStyle egenskaben definerer stilen, der skal bruges til at tegne på canvas.

Det skal indstilles før stroke() metoden kaldes.

实例

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

Prøv det selv

lineCap egenskab

lineCap egenskaben definerer stilkantsstilen (butt, round eller square).

Standard er square (firkant).

Det skal indstilles før stroke() metoden kaldes.

实例

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

Prøv det selv

Se også:

Det fulde Canvas Reference Manual på CodeW3C.com