Canvas arcTo() methode
Definitie en gebruik
arcTo() Methoden maken een boog/cirkel op het canvas tussen twee tangentlijnen.
Tip:Gebruik stroke() Methoden tekenen een exacte boog op het canvas.
Voorbeeld
Maak een boog op het canvas tussen twee tangentlijnen:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.beginPath();
ctx.moveTo(20,20); // Maak een startpunt
ctx.lineTo(100,20); // Maak een horizontale lijn
ctx.arcTo(150,20,150,70,50); // Maak een boog
ctx.lineTo(150,120); // Maak een verticale lijn
ctx.stroke(); // Trekken tekenen
Grammatica
context.fillRect(x1,y1,x2,y2,r);
Parameterwaarde
| Parameter | Beschrijving |
|---|---|
| x1 | De x-coördinaat van het beginpunt van de boog |
| y1 | De y-coördinaat van het beginpunt van de boog |
| x2 | De x-coördinaat van het einde van de boog |
| y2 | The y-coordinate of the end point of the arc |
| r | Arc radius |
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.
