Html5-Canvas draw an arc (Circular)

<Script type = "text/javascript" src = "jquery-1.5.1.min.js"> </script>
<Script type = "text/javascript">
$ (Function (){
Var can = document. getElementById ("can ");
Var ctx = can. getContext ("2d ");

Ctx. beginPath ();

Ctx. arc (75,75, 50,0, Math. PI * 2, true); // Outer Ring
Ctx. moveTo (110,75 );
Ctx. arc (75,75, 35,0, Math. PI, false); // mouth, half circle
Ctx. moveTo (65,65 );
Ctx. arc (60, 65, 5, 0, Math. PI * 2, true); // left eye
Ctx. moveTo (95,65 );
Ctx. arc (90,65, 5, 0, Math. PI * 2, true); // right eye
Ctx. stroke (); // use ctx. fill (); that is, fill color;

})
</Script>
 
<Canvas id = "can" width = "150" height = "150"> </canvas>
Ctx. arc
Parameter description: (defines a center point, radius, start angle, end angle, and drawing direction: clockwise or counterclockwise );

Ctx. stroke: draws the border of the image;

 

Ideas:

1. First Use ctx. moveTo to move the painting start point and ctx. arc to draw the path (the painting path here is not actually drawn to the canvas, just like the pen path tool in Photoshop ).

2. Use ctx. stroke (); To create a border and draw the border on the canvas;
The following ctx. stroke (only the border draw path, so only the line)
 

The following ctx. fill (fill color draw path, will automatically close the path)
 

 


 

From Captain op