HTML Canvas form

实例

Eksempel 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();

Prøv det selv

Canvas linjetegning

linjetegning bruger stien i canvasen:

metode

beginPath() metode starter en ny sti. Den tegner ikke noget, den definerer bare en ny sti.

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

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

stroke() metode tegner faktisk linjer. Standard farve er sort.

Flere eksempler

Eksempel 2

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

Prøv det selv

Eksempel 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();

Prøv det selv

Tip

Hvis du vil tegne et rektangel, behøver du ikke tegne 4 linjer.

i det næste kapitel vil du lære at bruge drawRect() metode til at tegne rektangel.

strokeStyle egenskab

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

må være kaldt stroke() indstille det før metoden.

实例

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();

Prøv det selv

Se også:

CodeW3C.coms fulde Canvas reference manual