HTML and CSS Reference
In-Depth Information
Figure 2-4. A basic circle arc
tiplying them by (Math.PI/180) . By using 0 as the start angle and 360 as the end, we create
a full circle.
We can also draw a segment of a circle by not specifying the entire 0 to 360 start and stop
angles. This code for drawScreen() will create one-quarter of a circle drawn clockwise, as
shown in Figure 2-5 :
context . arc ( 100 , 200 , 20 , ( Math . PI / 180 ) * 0 , ( Math . PI / 180 ) * 90 , false
false );
Figure 2-5. A one-quarter circle arc
If we want to draw everything but the 0-90 angle, as shown in Figure 2-6 , we can employ the
anticlockwise argument and set it to true :
context . arc ( 100 , 200 , 20 , ( Math . PI / 180 ) * 0 , ( Math . PI / 180 ) * 90 , true
true );
Figure 2-6. A three-fourths circle arc
context.arcTo()
Here is in action:
context . arcTo ( x1 , y1 , x2 , y2 , radius )
The arcTo method has been implemented only in the latest browsersâ€”perhaps because its
capabilities can be replicated by the arc() function. It takes in a point ( x1 , y1 ) and draws a
Search WWH ::

Custom Search