Linje HTML Canvas

实例

// Skapar canvas:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Definierar en ny bana:
ctx.beginPath();
// Definierar startpunkt:
ctx.moveTo(0, 0);
// Definierar slutpunkt:
ctx.lineTo(200, 100);
// Ritar:
ctx.stroke();

Prova själv

Canvas linjedragning

Linjedragning använder banan i canvas:)

metod

beginPath() metoden börjar en ny bana. Den ritar ingenting, den definierar bara en ny bana.

moveTo() definierar linjens startpunkt. Den ritar ingenting, den sätter bara en startpunkt.

lineTo() metoden definierar linjens slutpunkt. Den ritar ingenting, den sätter bara en slutpunkt.

stroke() metoden ritar faktiskt linjen. Standard färg är svart.

lineWidth-attribut

lineWidth-attributet definierar linjens bredd som används när man ritar på canvas.

Det måste sättas innan stroke() metodkallas.

实例

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

Prova själv

strokeStyle-attribut

strokeStyle-attributet definierar stilen som används när man ritar på canvas.

Det måste sättas innan stroke() metodkallas.

实例

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

Prova själv

lineCap-attribut

lineCap-attributet definierar linjens ändstil (butt, round eller square).

Standard är square (rektangel).

Det måste sättas innan stroke() metodkallas.

实例

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

Prova själv

Se också:

Komplett Canvas-referenshandbok för CodeW3C.com