Drawing an Arc
![Canvas Canvas](https://lh4.googleusercontent.com/-4oy9BJTLEDM/UiNPueLXQAI/AAAAAAAAAZM/-0iCMTUyw4U/h120/canvaslogo.png)
There are two methods you can use to draw an arc, arc() and arcTo(). See below for the method definitions.
context.arc(x, y, radius, startingAngle, endingAngle, counterClockwise);
context.arcTo(x1, y1, x2, y2, radius);
The arc() method takes the center of our circle as the x and y parameters, and the radius of the circle. The starting and ending angles are in radians. The last parameter is a boolean that tells whether the drawing should be clockwise (false) or counter-clockwise (true). To convert degrees to radians, you can simply multiply the degrees by PI divided by 180.
The arcTo() method is a bit different; it draws a line from the current position to x1, y1, and then arcs to x2, y2 with the given radius.
The below draws an arc with a radius of 50, where the starting angle is 20 degrees, and the ending angle is 80 degrees.
context.arc(100, 100, 50, 20 * (Math.PI / 180), 80 * (Math.PI / 180), false);
![](http://1.bp.blogspot.com/-xe7RJ_CImbQ/Uh7PAw3zkNI/AAAAAAAAAYM/QZxgXER83n0/s1600/digg.png)
![](http://2.bp.blogspot.com/-qU9hOSgAAGg/Uh7PBkw5nXI/AAAAAAAAAYg/F3RH2FdUcUM/s1600/tech.png)
![](http://2.bp.blogspot.com/-SIE_cDNZwJo/Uh7QZns3f9I/AAAAAAAAAY8/_RgdI2_Yjuc/s1600/delicious.png)
![](http://3.bp.blogspot.com/-_SeXttyPxVw/Uh7PBUZ_xSI/AAAAAAAAAYY/WNUWXOgi9ZA/s1600/stumble.png)
![](http://4.bp.blogspot.com/-2L7TvTK8Spo/Uh7PBNnVSUI/AAAAAAAAAYc/wDUiY4QNFt0/s1600/red.png)
![](http://4.bp.blogspot.com/-7BJsLYGlmFs/Uh7PA66dlKI/AAAAAAAAAYI/YLZgf4eDolE/s1600/fb.png)
![](http://2.bp.blogspot.com/-AAPfGKZ58CE/Uh7PA1IFwAI/AAAAAAAAAYw/hu9jFLzr61Q/s1600/pin.png)
No comments :
Post a Comment