HTML and CSS Reference
In-Depth Information
TABLE 1-8 Parameters required to draw an arc
Parameter
Description
X , Y
The first two parameters are the X and Y coordinates for the center of the circle.
The third parameter is the radius. This is the length of the distance from the
center point of the circle to the curve.
startAngle , endAngle
The fourth and fifth parameters specify the starting and ending angles of the
arc to be drawn. This is measured in radians, not in degrees.
The final parameter specifies the drawing direction of the arc.
counterclockwise
ctxt.beginPath();
ctxt.arc(150,100,75,0,2 * Math.PI, false);
ctxt.lineWidth = 25;
ctxt.strokeStyle = '#0f0';
ctxt.stroke();
ctxt.beginPath();
ctxt.arc(450, 100, 75, 1.5 * Math.PI, 2 * Math.PI, false);
ctxt.lineWidth = 25;
ctxt.strokeStyle = 'blue';
ctxt.stroke();
ctxt.beginPath();
ctxt.arc(150, 300, 75, 1 * Math.PI, 1.5 * Math.PI, false);
ctxt.lineWidth = 25;
ctxt.strokeStyle = '#0ff';
ctxt.stroke();
ctxt.beginPath();
ctxt.arc(450, 300, 75, .5 * Math.PI, 1 * Math.PI, false);
ctxt.lineWidth = 25;
ctxt.strokeStyle = '#f00';
ctxt.stroke();
This code sample draws four arcs: a full circle followed by three quarter circles, each with
a different style. Notice that some math formulas are specified in the parameters to the arc.
This math is necessary to get the value in radians because the parameters for startAngle and
endAngle are specified in radians, not in degrees. The code produces the drawing shown in
Figure 1-30.

Search WWH ::

Custom Search