Menu
I can not figure out what all the parameters to the arc() function are (by experimentation) and I have not found any tutorial that seems to explain them. Where would a good explanation of the arc() function be?
285
ctx.arc(x, y, radius, startAngle, endAngle [, antiClockwise]) The arc() method draws a circular arc centered at (x,y) with the radius of radius . The arc will start at startAngle and end at endAngle . Both startAngle and endAngle are in radians. Since π radians = 180 degrees , 1 radian is about π/ 180 degrees.
CSS Shapes It's possible to draw circles and arcs in CSS by simply creating a square <div> and setting border-radius to 50%. Each side of the border can take a different color or can be set to transparent . The background-color property sets the shape's fill, if any.
arc() method of the Canvas 2D API adds a circular arc to the current sub-path.
arc(x, y, radius, startAngle, endAngle, anticlockwise)
The first three parameters, x and y and radius, describe a circle, the arc drawn will be part of that circle. startAngle and endAngle are where along the circle to start and stop drawing. 0 is east, Math.PI/2 is south, Math.PI is west, and Math.PI*3/2 is north. If anticlockwise is 1 then the direction of the arc is reversed.
https://developer.mozilla.org/En/Canvas_tutorial/Drawing_shapes#Arcs
In the attached diagrams, the only difference is the anticlockwise param. Math.PI/2 always ends south when clockwise or anticlockwise
174
I was having the same problem and made a little interactive page to help make sense of it:
http://www.scienceprimer.com/drawing-circles-javascript-html5-canvas-element
All of the parameters can be adjusted and the resulting arc is rendered in real time. The page also demonstrates how the fill(), stroke() and closePath() methods interact with the arc() method.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
