HTML and CSS Reference
In-Depth Information
FIGURE 1-30 Drawing arcs on the canvas in different colors
The previous example demonstrated a simple arc. Now look at the next arc method, the
quadraticArc . The curve of a quadratic arc is evenly distributed from one end to the other
in terms of its distance from the center point. The quadraticCurveTo method allows you to
specify some additional parameters to alter the “steepness” of the curve—in other words,
to change the distance from the center point along the curve. Drawing a quadratic curve is
somewhat like drawing a straight line but then pinching it in the middle and pulling it away
to create a curve where the starting and ending points of the line stay fixed. The farther away
you pull the center point, the steeper the curve becomes. Here's an example:
ctxt.beginPath();
ctxt.moveTo(10,380);
ctxt.quadraticCurveTo(300,-250,580,380);
ctxt.lineWidth = 25;
ctxt.strokeStyle = '#f00';
ctxt.stroke();
You first need use the moveTo method to tell the context where you want your curve to
start. Then, you pass the four parameters described in Table 1-9 to the quadraticCurveTo
method.
TABLE 1-9 Parameters required for the quadraticCurveTo method
Parameter
Description
controlX , controlY
These parameters define the control point, relative to the top left of the
canvas, that is used to “stretch” the curve away from the line formed by the
start and end points.
endX , endY
This is the point where the curve should end.
The code sample produces the image in Figure 1-31.
 
Search WWH ::




Custom Search