HTML and CSS Reference
In-Depth Information
Listing 4-4. Setting the lineWidth and lineCap Properties
context.lineWidth = 10;
context.moveTo(20, 100);
context.lineTo(180, 100);
context.lineCap = "butt";
context.moveTo(20, 120);
context.lineTo(180, 120);
context.lineCap = "round";
context.moveTo(20, 140);
context.lineTo(180, 140);
context.lineCap = "square";
In this listing, the width of the lines to be drawn is set to 10 pixels using the lineWidth property. Then
the code draws three lines by setting lineCap to butt , round , and square , respectively.
Notice the use of the beginPath() method, which begins a new drawing path. (Paths are covered in a
later section.) Here, suffice to say that a path is a series of drawing operations. If you don't call beginPath() ,
all lines are redrawn with the last lineCap setting you specified ( square in this example).
Notice how the last two lines in Figure 4-5 add extra pixels to the overall length, whereas the first line
is precisely drawn as per the start and end coordinates.
Drawing Curves
You can draw three types of curves on the canvas : arcs, quadratic curves, and Bezier curves. These three
types of curves are drawn using the arc() , arcTo() , quadraticCurveTo() , and bezierCurveTo() methods.
Drawing an arc is necessary in order to draw circles and rounded rectangles. You can probably do all the
drawing you need with arc() and arcTo() , but if you need something more complicated, you can
investigate quadratic and Bezier curves. The following sections discuss arc() and arcTo() .
A Quick Introduction to Radians
While working with arcs, you frequently come across angles specified in radians. The radian is the standard
unit of angular measurement and describes the ratio between the length of an arc of a circle and its radius.
One radian is defined as the angle subtended when the length of the arc of a circle is equal to the radius of
that circle. A radian is therefore equal to (Length of the arc / Radius of the arc).
The circumference of a circle is given by the formula 2πr, where r is the radius of the circle. A full circle
means 360° or 2πr/r—that is, 2π and 1 radian = (180/π)°. To convert radians to degrees, you need to
multiply a radian value by 180/π. Along the same lines, to convert degrees to radians, you multiply a degree
value by π/180.
Search WWH ::

Custom Search