HTML and CSS Reference
In-Depth Information
Figure 2-4. A basic circle arc
Notice that we have to convert our start angle ( 0 ) and our end angle ( 360 ) into radians
by multiplying 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 clock-
wise, as shown in Figure 2-5 :
context.arc(100, 200, 20, (Math.PI/180)*0, (Math.PI/180)*90, 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);
Figure 2-6. A three-fourths circle arc
context. arcTo ()
The arcTo method has only been implemented 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 straight line from the current path position to this new position. Then it draws
an arc from that point to the y1 , y2 point using the given radius.
The context.arcTo method will work only if the current path has at least one subpath.
So, let's start with a line from position 0,0 to position 100,200. Then we will build our
small arc. It will look a little like a bent wire coat hanger (for lack of a better description),
as shown in Figure 2-7 :
context.moveTo(0,0);
context.lineTo(100, 200);
context.arcTo(350,350,100,100,20);

Search WWH ::

Custom Search