Canvas lineTo() methode

Canvas reference manual

Definitie en gebruik

lineTo() De methode voegt een nieuwe punt toe en maakt een lijn van dat punt naar het laatste aangegeven punt op het canvas (deze methode maakt geen lijn).

Tip:Gebruik stroke() De methode tekent een exact pad op het canvas.

Voorbeeld

Voorbeeld 1

Begin een pad, beweeg naar positie 0,0. Maak een lijn naar positie 300,150:

Uw browser ondersteunt de HTML5 canvas tag niet.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

Try it yourself

Tip:Meer voorbeelden worden aangeboden aan de onderkant van de pagina.

Syntaxis

context.lineTo(x,y);

Parameterwaarde

Parameter Beschrijving
x De x-coördinaat van het doel van het pad.
y De y-coördinaat van het doel van het pad.

Meer voorbeelden

Voorbeeld 2

Teken een pad, dat de vorm van het letter L heeft:

Uw browser ondersteunt de HTML5 canvas tag niet.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.stroke();

Try it yourself

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Canvas reference manual