Instance
Create a circle:
var C=document.getelementbyid ("MyCanvas"), Var ctx=c.getcontext ("2d"); Ctx.beginpath (); Ctx.arc (100,75,50,0,2* Math.PI); Ctx.stroke ();
Browser support
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the arc () method.
Note: Internet Explorer 8 or earlier browsers do not support the <canvas> element.
Definition and usage
The arc () method creates an arc/curve (used to create a circle or a partial circle).
Tip: To create a circle through arc (), set the starting angle to 0 and the end angle to 2*math.pi.
Tip: Use the stroke () or fill () method to draw the actual arc on the canvas.
- Center: Arc (75,50,0*math.pi,1.5*math.pi)
- Starting angle: Arc (100,75,50,0,1.5*math.pi)
- End Angle: Arc (100,75,50,0*MATH.PI,1.5*math.pi)
JavaScript Syntax:
Context.arc (x,y,r,sangle,eangle,counterclockwise);
Parameter values
Parameters |
Description |
X |
The x-coordinate of the center of the circle. |
Y |
The y-coordinate of the center of the circle. |
R |
The radius of the circle. |
Sangle |
The starting angle, measured in radians. (The arc's circular three o'clock position is 0 degrees). |
Eangle |
The end angle, measured in radians. |
Counterclockwise |
Optional. The rules should be plotted counterclockwise or clockwise. False = clockwise, true = counterclockwise. |
Introduce the syntax of the curve for you. If you want to create a circle, we can use the arc () method.
Syntax: Arc (defines a center point, radius, start angle, end angle, and drawing direction: clockwise or counterclockwise)
Code: CONTEXT.ARC (CenterX, CenterY, radius, StartingAngle, Endingangle, anticlockwise);
HTML5 Canvas ARC Description:
Gossip Chart Example code:
The program effect is as follows:
<! DOCTYPE html> HTML5 Canvas arc () function//////////////////////(GO)