HTML and CSS Reference
In-Depth Information
Listing 4-4.
Setting the
lineWidth
and
lineCap
Properties
context.lineWidth = 10;
context.beginPath();
context.moveTo(20, 100);
context.lineTo(180, 100);
context.lineCap = "butt";
context.stroke();
context.beginPath();
context.moveTo(20, 120);
context.lineTo(180, 120);
context.lineCap = "round";
context.stroke();
context.beginPath();
context.moveTo(20, 140);
context.lineTo(180, 140);
context.lineCap = "square";
context.stroke();
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.
