Form HTML Canvas

实例

Exempel 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 själv

Canvas linj ritning

linjers ritning används med hjälp av vägen på canvas:

metoden

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 linjer. Standardfärgen för pensel är svart.

Mer exempel

Exempel 2

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

Prova själv

Exempel 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 själv

Tips

om du vill rita en rektangel behöver du inte rita 4 linjer.

i nästa kapitel kommer du att lära dig att använda drawRect() metoden för att rita rektangel.

strokeStyle egenskap

strokeStyle egenskap definierar stilen som används för att rita på canvas.

måste vara inställt stroke() innan du anropar

实例

ctx.beginPath();
// 定义矩形
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// 定义三角形
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "red";
ctx.stroke();

Prova själv

Se också:

Komplett Canvas-referenshandbok för CodeW3C.com