HTML and CSS Reference
In-Depth Information
Here I have used Math.PI*2 for the endAngle parameter. This is effectively the same as writing (Math.PI/
180)*360 but requires less typing.
Figure 14-6 A simple circle drawn using Canvas.
You can also draw a segment of a circle.
ctx.beginPath();
ctx.arc(50, 50, 50, 0, Math.PI*1.5, true);
ctx.fill();
Figure 14-7 shows the result of this code.
Figure 14-7 Drawing a segment of a circle.
Here the arc() function draws a curved path between the start and end points. When the fill() function is
called the start and end points of the path are joined, creating a segment.
To draw a sector of a circle (that is, a pie-shaped part of a circle) you need to draw a line to the center of the circle
after you have created your arc. The following example shows how this would be done.
ctx.beginPath();
ctx.arc(50, 50, 50, Math.PI*1.75, Math.PI*1.5, true);
ctx.lineTo(50, 50);
ctx.fill();
Search WWH ::




Custom Search