# Draw a circle or arc using HTML5 canvas

Source: Internet
Author: User

Note: This article is part of a series of articles on "Getting Started with HTML5 canvas drawing". If you are a HTML5 beginner, just read this article, you may not have a deeper understanding of canvas, and even can not read this article smoothly. Please click on the link above to learn the full content of drawing graphics using HTML5 canvas.

In HTML5, `CanvasRenderingContext2D` The object also provides methods specifically for drawing circles or arcs, as described in the following properties and methods:

`Arc (x, y, radius, Startrad, Endrad, anticlockwise)`

On the canvas canvas, draw an `(x,y)` arc on a circle with a `radius` radius of the center of the coordinate point. The starting arc of this arc is `startRad` , the end radian `endRad` is. The radian here is calculated as the angle of the clockwise rotation of the x-axis positive direction (clock three o'clock). Indicates whether to start drawing in a counterclockwise or clockwise direction, or counterclockwise `true` If it is, or clockwise if it is. `anticlockwise` `false` The parameters are optional and `false` , by default, clockwise. `anticlockwise`

`ArcTo (x1, y1, x2, y2, radius)`
This method takes advantage of the angle formed by the three points of the current endpoint, endpoint 1, `(x1,y1)` and Endpoint 2 `(x2,y2)` , and then draws an arc on a circle tangent to each side of the angle and with a radius `radius` . In general, the starting position of the drawing arc is the current endpoint, the end position is endpoint 2, and the direction of the arc drawing is the direction of the shortest arc connecting the two endpoints. In addition, if the front end point is not on the specified circle, the method also draws a line from the current endpoint to the beginning of the arc.

As the details `arcTo()` are more detailed, please visit here to see the detailed usage of arcto ().

After understanding the above API for canvas drawing arcs, let's take a look at how to `arc()` use the draw arcs. We already know that `arc()` the 4th and 5th parameters that are received represent the starting and ending radians of the drawing arc. I believe that all of you in the school of mathematics or geometry courses have learned radian, Radian is an angle unit. Arc length is equal to the radius of the arc, the pair of central angle is 1 radians. We also know that the radius `r` of the circle, its circumference is `2πr` . With these geometrical knowledge, we can draw arcs using `arc()` methods.

Drawing arcs using canvas

Now, let's draw a 1/4 arc of a circle with a radius of 50px.

`1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "UTF-8">5 <title>HTML5 Canvas drawing arcs Getting Started example</title>6 </Head>7 <Body>8 9 <!--Add a canvas label and a red border for easy viewing on the page -Ten <CanvasID= "MyCanvas"width= "400px"Height= "300px"style= "border:1px solid red;"> One your browser does not support canvas labels.  A </Canvas> -  - <Scripttype= "Text/javascript"> the //Get Canvas object (canvas) - varCanvas=document.getElementById ("MyCanvas"); - //simply detects if the current browser supports canvas objects to avoid prompting for syntax errors in some browsers that do not support HTML5 - if(canvas.getcontext) { +     //gets the corresponding Canvasrenderingcontext2d object (brush) -     varCTX=Canvas.getcontext ("2d");  +      A     //start a new drawing path at Ctx.beginpath (); -     //set the arc color to blue - Ctx.strokestyle= "Blue"; -     varCircle= { - x: -,    //x-axis coordinate value of the center Point - y: -,    //y coordinate value of center Point in r: -      //radius of the circle -     }; to     //draws an arc in the clockwise direction of a circle with a radius of 50px along the coordinate point (100,100) + Ctx.arc (circle.x, Circle.y, CIRCLE.R,0, Math.PI/ 2, false);  -     //draws an arc according to the specified path the Ctx.stroke (); * } \$ </Script>Panax Notoginseng </Body> - </HTML>`

The corresponding display effect is as follows: Running code

use canvas to draw arcs in a clockwise direction

As shown above, we set the circle in which the arc is drawn to have the center `(100,100)` coordinate of the radius 50px. Since a circle with a radius of `r` circumference is, that is, `2πr` a complete circle, its corresponding radian is `2π` (converted to a conventional angle is 360°), so we want to draw a circle of 1/4 arc, as long as the radian is Π/2 (that is, 90°) can be. In the above code, we used the constants `Math.PI` in JavaScript that represent π.

In addition, in the above code, we also set the direction of the arc to be drawn in clockwise direction ( `false` ). Since the starting radian is 0 and the ending Radian is Π/2, the arc is drawn clockwise from the square of the x-axis, resulting in the graph above. What happens if we change the direction of the arc drawn in the above code to counterclockwise?

`1<script type= "Text/javascript" >2 //Get Canvas object (canvas)3 varCanvas = document.getElementById ("MyCanvas");4 //simply detects if the current browser supports canvas objects to avoid prompting for syntax errors in some browsers that do not support HTML55 if(canvas.getcontext) {6     //gets the corresponding Canvasrenderingcontext2d object (brush)7     varCTX = Canvas.getcontext ("2d"); 8     9     //start a new drawing pathTen Ctx.beginpath (); One     //set the arc color to blue ACtx.strokestyle = "Blue"; -     varCircle = { -X:100,//x-axis coordinate value of the center Point theY:100,//y coordinate value of center Point -R:50//radius of the circle -     }; -     //draws an arc counterclockwise from a circle with a radius of 50px along the coordinate point (100,100) +Ctx.arc (circle.x, Circle.y, CIRCLE.R, 0, MATH.PI/2,true);  -     //draws an arc according to the specified path + Ctx.stroke (); A } at</script>`

The corresponding display effect is as follows: Run code

use canvas to draw arcs in a counterclockwise direction

Draw a circle using canvas

When we learn to draw an arc, extrapolate, we want to draw a circle naturally, just want to change the end of the above code to 2π.

`1<script type= "Text/javascript" >2 //Get Canvas object (canvas)3 varCanvas = document.getElementById ("MyCanvas");4 //simply detects if the current browser supports canvas objects to avoid prompting for syntax errors in some browsers that do not support HTML55 if(canvas.getcontext) {6     //gets the corresponding Canvasrenderingcontext2d object (brush)7     varCTX = Canvas.getcontext ("2d"); 8     9     //start a new drawing pathTen Ctx.beginpath (); One     //set the arc color to blue ACtx.strokestyle = "Blue"; -     varCircle = { -X:100,//x-axis coordinate value of the center Point theY:100,//y coordinate value of center Point -R:50//radius of the circle -     }; -     //draw a circle with a radius of 50px at the center of the coordinate Point (100,100) in the canvas +Ctx.arc (circle.x, Circle.y, CIRCLE.R, 0, Math.PI * 2,true);  -     //draws an arc according to the specified path + Ctx.stroke (); A } at</script>`

The corresponding display effect is as follows: Run code

Draw a circle using canvas

Note: `arc()` the start and end Radian parameters in the method are measured in `startRad` `endRad` radians, even if you fill in a number, such as 360, which is still considered to be 360 radians. What is the effect of setting the end radian of the above code to 360? This depends on the direction of the drawing (that is, `anticlockwise` the value of the parameter), and if it is drawn clockwise ( `false` ), a complete circle will be drawn, and if drawn counterclockwise, radians greater than 2 π will be converted to a radian equal to, but not greater than, 2 π. For example, set the ending Radian in the above code to 3π (), and if so, it will appear `Math.PI * 3` `anticlockwise` `false` as a complete circle, and if `true` so, its display will be the same as when it was set to π.

the drawing effect of clockwise (false) rotation when the end radian is set to 3π

The drawing effect of counterclockwise (true) rotation when the end radian is set to 3π

Draw a circle or arc using HTML5 canvas

Related Keywords:

### 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.