Html5-Canvas draw an arc (Circular)

Source: Internet
Author: User

<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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.