HTML and CSS Reference
In-Depth Information
(
x
,
y
) as well as the circle's
radius
. How much of the circle is drawn is defined by
startAngle
and
endAngle
, in radians. The direction of the curve is set by a Boolean value,
which is the final parameter specified by
counterclockwise
. If it is set to true, the curve
will move counterclockwise; otherwise, it will move clockwise. If your math is a bit rusty, to
make a full circle, the start angle should be set to 0 and the end angle should be 2π. So to
start your face drawing, use
arc()
to draw the head as a circle:
context.arc(150,150,100,0,Math.PI*2,true);
Use the
quadraticCurveTo(
cpx
,
cpy
,
x
,
y
)
method to draw the nose and the mouth.
This function starts at the last point in the path and draws a line to (
x
,
y
). The control point
(
cpx
,
cpy
) is used to pull the line in that direction, resulting in a curved line. However, you
call
moveTo()
first to set the last point in the path. In the following snippet, a line was
drawn from (155,130) to (155,155). Because the x-coordinate of the control point (130,145)
is to the left, the line is pulled in that direction. Because the y-coordinate is in between the
y-coordinates, the pull is roughly in the middle.
context.moveTo(155,130);
context.quadraticCurveTo(130,145,155,155);
context.moveTo(100,175);
context.quadraticCurveTo(150,250,200,175);
You call
bezierCurveTo(
cp1x
,
cp1y
,
cp2x
,
cp2y
,
x
,
y
)
to draw the eyes. This function
is similar to
quadraticCurveTo()
except that it has two control points and has a line that is
pulled toward both of them. Again,
moveTo()
is used to set the start point of the line:
context.moveTo(80,110);
context.bezierCurveTo(95,85,115,85,130,110);
context.moveTo(170,110);
context.bezierCurveTo(185,85,205,85,220,110);
Lastly, use
arcTo(
x1
,
y1
,
x2
,
y2
,
radius
)
to draw a frame around the face. Unfortunately,
foreshadowing some issues with the
canvas
API, we note that
arcTo()
is not currently
supported properly in all browsers, so it may render oddly. When it does work, it creates
two lines and then draws an arc with the radius specified and containing a point tangent to
each of the lines. The first line is drawn from the last point in the subpath to
(x1,y1)
and
the second line is drawn from
(x1,y1)
to
(x2,y2)
.
context.moveTo(50,20);
context.arcTo(280,20,280,280,30);
context.arcTo(280,280,20,280,30);
context.arcTo(20,280,20,20,30);
context.arcTo(20,20,280,20,30);
The complete example is shown next. Note that, given layering, you draw and fill the
frame and face and then draw the features last. Also note that you reset the paths with the
beginPath()
method. Commonly, people forget to do this, which can produce some
interesting drawings. A rendering of the face example is shown in Figure 2-4.
