Home > Developer > Web Develop
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)
(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.
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 canvasWhen 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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
