How to use a path to draw an arc in HTML5Canvas-html5 tutorial-

Source: Internet
Author: User
This article mainly introduces how to draw an arc using a path in HTML5Canvas. This article demonstrates how to draw a complete circle, half circle, and arc in HTML5Canvas, for more information, see Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, "Advanced Path Methods, Arcs"

In a Canvas drawing, an arc can be either an integral circle or a part of a circumference.

The Code is as follows:


Context. arc ()
Context. arc (x, y, radius, startAngle, endAngle, anticlockwise)


In the preceding method description, x and y define the center of the circle, and radius defines the radius of the circumference. StartAngle and endAngle are expressed in polar coordinates. Anticlockwise (Boolean value) defines the direction of the arc.

For example, if we want to draw a circle with a point (100,100) as the center and a radius of 20, we can use the following code:

The Code is as follows:


Context. arc (100,100, 20, (Math. PI/180) * 0, (Math. PI/180) * 360, false );


The execution result is:

It is worth noting that in the above Code, we need to multiply the starting angle (0) and ending angle (360) by (Math. PI/180) to convert them into polar radians. When the starting angle is 0 and the ending angle is 360, an integral circle is obtained.

In addition to the circle, we can also draw an arc fragment. The following code draws 1/4 circles:

The Code is as follows:


Context. arc (100,100, 20, (Math. PI/180) * 0, (Math. PI/180) * 90, false );

If we want to draw another 3/4 circles except the arc, we can set anticlockwise to true:

The Code is as follows:


Context. arc (100,100, 20, (Math. PI/180) * 0, (Math. PI/180) * 90, true );

In the Canvas coordinate system, the Y axis is downward.

NOTE 2: You can use the context. arcTo () method to draw an arc. In the original HTML5 Canvas of Steve Fulton & Jeff Fulton, the description of this method is completely incorrect. For a summary of the correct arcTo (), see arcTo of the curve.

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.