HTML5 Canvas Arc Tutorial

To create an arc with HTML5 Canvas, we can use the arc() method. Arcs are defined by a center point, a radius, a starting angle, an ending angle, and the drawing direction (either clockwise or anticlockwise).  Arcs can be styled with the lineWidthstrokeStyle, and lineCap properties.

An arc is nothing more than a section of the circumference of an imaginary circle. This imaginary circle can be defined by xy, and radius.

Next, we can define the arc itself with two points along the imaginary circle's circumference defined by startAngle and endAngle. These two angles are defined in radians and form imaginary lines that originate from the center of the circle and intersect the ends of the arc that we wish to create.

The final argument of the arc method is antiClockwise which defines the direction of the arc path between its two ending points. Unless otherwise specified, this argument is defaulted to false, which causes the arc to be drawn clockwise.

Note: Alternatively, we can also create an arc using the arcTo() method which is used for creating rounded corners in a path. Click here to read more.



web前端交流群:Css Js 网站美工
Quadratic Curve