Shapes in HTML Canvas

实例

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

Try it yourself

Canvas lijntekening

lijntekeningen worden uitgevoerd met behulp van paden in het canvas:

de methode

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

moveTo() definieert het beginpunt van een lijn. Het tekent niets, het stelt alleen een beginpunt in.

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

stroke() de methode tekent werkelijk lijnen. De standaard penkleur is zwart.

meer voorbeelden

voorbeeld 2

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

Try it yourself

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

Try it yourself

tip

als je een rechthoek wilt tekenen, hoef je niet 4 lijnen te tekenen.

in het volgende hoofdstuk zul je leren hoe je drawRect() methode om een rechthoek te tekenen.

strokeStyle eigenschap

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

moet worden aangeroepen stroke() voordat je het instelt.

实例

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

Try it yourself

See also:

Complete Canvas Reference Manual of CodeW3C.com