Home > Tutorials > Html Tutorials

Use the HTML5 Canvas API to draw arcs and circles. html5canvas

Source: Internet
Author: User
Tags constant math
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Use the HTML5 Canvas API to draw arcs and circles. html5canvas

In html5, The CanvasRenderingContext2D object also provides methods specifically used to draw circles or arcs. For details, refer to the following attributes and methods:

Copy the content to the clipboard using JavaScript Code
  1. Arc (x, y, radius, startRad, endRad, anticlockwise)

Draw an arc of a circle centered on coordinate points (x, y) and radius on the canvas. The starting radian of this arc is startRad, And the ending radian is endRad. Here the radians are calculated based on the clockwise rotation angle in the positive direction of the X axis (clock three o'clock. Anticlockwise indicates that the image is drawn in the clockwise or clockwise direction. If it is true, it indicates the clockwise direction. If it is false, it indicates the clockwise direction. The anticlockwise parameter is optional. The default value is false, that is, clockwise.

Radians in the arc () method

Copy the content to the clipboard using JavaScript Code
  1. ArcTo (x1, y1, x2, y2, radius)

This method uses the angle between the current endpoint, endpoint 1 (x1, y1), and Endpoint 2 (x2, y2, draw an arc on the circle tangent to both sides of the angle and radius. Generally, the starting position of the drawn arc is the current endpoint, And the ending position is endpoint 2, and the direction of the arc is the direction of the shortest arc connecting the two endpoints. In addition, if the current endpoint is not on the specified circle, this method will draw a straight line from the current endpoint to the starting point of the arc.
Since the arcTo () method is described in detail in a large amount of space, please go here to view the detailed usage of arcTo.

After learning about the above API for canvas to draw an arc, let's take a look at how to draw an arc using arc. We already know that the 4th and 5th parameters received by arc () indicate the start and end radians of the drawn arc. I believe that you have learned radians in your school's mathematics or geometric courses. radians are an angle unit. The arc with the arc length equal to the radius is 1 radian. We also know that the circle with a radius of r has a circumference of 2 π r. With this knowledge of ry, we can use the arc () method to draw an arc.

Draw an arc using canvas

Now, we will draw a 1/4 arc of a circle with a radius of 50 PX.

Copy the content to the clipboard using JavaScript Code
  1. <! DOCTYPE html>
  2. <Html>
  3. <Head>
  4. <Meta charset = "UTF-8">
  5. <Title> HTML5 Canvas getting started with creating an arc </title>
  6. </Head>
  7. <Body>
  9. <! -- Add a canvas label and a red border to view the canvas -->
  10. <Canvas id = "myCanvas" width = "400px" height = "300px" style = "border: 1px solid red;">
  11. Your browser does not support canvas labels.
  12. </Canvas>
  14. <Script type = "text/javascript">
  15. // Obtain the Canvas object (Canvas)
  16. Var canvas = document. getElementById ("myCanvas ");
  17. // Check whether the current browser supports Canvas objects to avoid syntax errors in some browsers that do not support html5.
  18. If (canvas. getContext ){
  19. // Obtain the corresponding CanvasRenderingContext2D object (paint brush)
  20. Var ctx = canvas. getContext ("2d ");
  22. // Start a new drawing path
  23. Ctx. beginPath ();
  24. // Set the arc color to blue
  25. Ctx. strokeStyle = "blue ";
  26. Var circle = {
  27. X: 100, // x axis coordinate value of the center
  28. Y: 100, // y axis coordinate value of the center
  29. R: 50 // radius of the circle
  30. };
  31. // Draw an arc along the clockwise direction of the circle with the coordinate point (100,100) as the center and the radius of 50 PX
  32. Ctx. arc (circle. x, circle. y, circle. r, 0, Math. PI/2, false );
  33. // Draw an Arc Based on the specified path
  34. Ctx. stroke ();
  35. }
  36. </Script>
  37. </Body>
  38. </Html>

The corresponding display effect is as follows:

Draw an arc clockwise using canvas
As shown above, we set the coordinates of the center of the circle where the drawn arc is located to (100,100) and the radius to 50px. Since the circumference of a circle with a radius of r is 2 π r, that is to say, the radians of a complete circle are 2 π (converted to a conventional angle of 360 ° ), so we want to draw a 1/4 arc of a circle, as long as the radian is π/2 (that is, 90 °. In the above Code, we use the constant Math. PI that represents π in JavaScript.

In addition, in the above Code, we also set the direction of drawing the arc to clockwise (false ). Since the start radians are 0 and the end radians are π/2, the arc is drawn clockwise from the positive direction of the X axis to obtain the above figure. If we change the arc draw direction in the above Code to a counter-clockwise, what will happen?

Copy the content to the clipboard using JavaScript Code
  1. <Script type = "text/javascript">
  2. // Obtain the Canvas object (Canvas)
  3. Var canvas = document. getElementById ("myCanvas ");
  4. // Check whether the current browser supports Canvas objects to avoid syntax errors in some browsers that do not support html5.
  5. If (canvas. getContext ){
  6. // Obtain the corresponding CanvasRenderingContext2D object (paint brush)
  7. Var ctx = canvas. getContext ("2d ");
  9. // Start a new drawing path
  10. Ctx. beginPath ();
  11. // Set the arc color to blue
  12. Ctx. strokeStyle = "blue ";
  13. Var circle = {
  14. X: 100, // x axis coordinate value of the center
  15. Y: 100, // y axis coordinate value of the center
  16. R: 50 // radius of the circle
  17. };
  18. // Draw an arc along the clockwise direction of the circle with the coordinate point (100,100) as the center and the radius of 50px
  19. Ctx. arc (circle. x, circle. y, circle. r, 0, Math. PI/2, true );
  20. // Draw an Arc Based on the specified path
  21. Ctx. stroke ();
  22. }
  23. </Script>

The corresponding display effect is as follows:

Draw an arc in a counterclockwise direction using canvas


Draw a circle using canvas

When we learned to draw an arc, we wanted to draw a circle. Naturally, we only needed to change the end radian of the above Code to 2 π.

Copy the content to the clipboard using JavaScript Code
  1. <Script type = "text/javascript">
  2. // Obtain the Canvas object (Canvas)
  3. Var canvas = document. getElementById ("myCanvas ");
  4. // Check whether the current browser supports Canvas objects to avoid syntax errors in some browsers that do not support html5.
  5. If (canvas. getContext ){
  6. // Obtain the corresponding CanvasRenderingContext2D object (paint brush)
  7. Var ctx = canvas. getContext ("2d ");
  9. // Start a new drawing path
  10. Ctx. beginPath ();
  11. // Set the arc color to blue
  12. Ctx. strokeStyle = "blue ";
  13. Var circle = {
  14. X: 100, // x axis coordinate value of the center
  15. Y: 100, // y axis coordinate value of the center
  16. R: 50 // radius of the circle
  17. };
  18. // Take the coordinate point (100,100) in the canvas as the center and draw a circle with a radius of 50 PX
  19. Ctx. arc (circle. x, circle. y, circle. r, 0, Math. PI * 2, true );
  20. // Draw an Arc Based on the specified path
  21. Ctx. stroke ();
  22. }
  23. </Script>

The corresponding display effect is as follows:

Copy the content to the clipboard using JavaScript Code
  1. <Script type = "text/javascript">
  2. // Obtain the Canvas object (Canvas)
  3. Var canvas = document. getElementById ("myCanvas ");
  4. // Check whether the current browser supports Canvas objects to avoid syntax errors in some browsers that do not support html5.
  5. If (canvas. getContext ){
  6. // Obtain the corresponding CanvasRenderingContext2D object (paint brush)
  7. Var ctx = canvas. getContext ("2d ");
  9. // Start a new drawing path
  10. Ctx. beginPath ();
  11. // Set the arc color to blue
  12. Ctx. strokeStyle = "blue ";
  13. Var circle = {
  14. X: 100, // x axis coordinate value of the center
  15. Y: 100, // y axis coordinate value of the center
  16. R: 50 // radius of the circle
  17. };
  18. // Take the coordinate point (100,100) in the canvas as the center and draw a circle with a radius of 50 PX
  19. Ctx. arc (circle. x, circle. y, circle. r, 0, Math. PI * 2, true );
  20. // Draw an Arc Based on the specified path
  21. Ctx. stroke ();
  22. }
  23. </Script>

Note: The startRad and endRad parameters in the arc () method are in radians. Even if you enter a number such as 360, it is still considered as 360 radian. What are the consequences of setting the end radian of the above Code to 360? This depends on the direction of the painting (that is, the value of the anticlockwise parameter). If it is drawn clockwise (false), a complete circle is drawn. If it is drawn counterclockwise, radians greater than 2π will be converted into radians with equal radians but not greater than 2π. For example, set the ending radians in the above Code to 3π (Math. PI * 3). If anticlockwise is false, it is displayed as a complete circle. If it is true, the display effect is the same as that when it is set to π.

Draws a clockwise (false) rotation when the arc is set to 3 π.

Draws a counter-clockwise (true) rotation when the radian is set to 3 π.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
html5 drag and drop api android canvas draw canvas draw transparent rectangle html5 canvas clock html5 canvas map example html5 canvas examples html5 canvas 3d tutorial
Related Article
What is the META tag in HTML? Introduction to META Tag proper...
An article that allows you to read basic HTML rules and Web p...
How does HTML set the background color? HTML background color...
HTML5 new label--nav label Introduction
What are the canvases and SVG in HTML5? What is the differenc...
How do I use the HTML5 feature of the Rel property in the?

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More