HTML canvas arc() methode
Definitie en gebruik
arc() De methode maakt een boog/kromming aan (gebruikt voor het maken van cirkels of delen van cirkels).
Tip:Om een cirkel te maken met arc(), stel de beginhoek in als 0en stel het einde van de hoek in als 2*Math.PI.
Tip:Gebruik stroke() of fill() De methode tekent een werkelijke boog op het canvas.
- Centrum: arc(
100,75,50,0*Math.PI,1.5*Math.PI) - Beginhoek: arc(100,75,50,
0,1.5*Math.PI) - Eindhoek: arc(100,75,50,0*Math.PI,
1.5*Math.PI)
Voorbeeld
Maak een cirkel aan:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
Syntax
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
Parameter value
| Parameter | Description |
|---|---|
| x | X-coordinate of the center of the circle. |
| y | Y-coordinate of the center of the circle. |
| r | Radius of the circle. |
| sAngle | Start angle, in radians. (The circular three o'clock position is 0 degrees). |
| eAngle | End angle, in radians. |
| counterclockwise | Optional. Specifies whether to draw in a clockwise or counterclockwise direction. False = clockwise, true = counterclockwise. |
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.
