HTML and CSS Reference
In-Depth Information
Your bricks are ready to go; now let's work on the ball.
6.2.3. Creating arcs and circles
You'll create the ball using
arc(x, y, radius, startAngle, endAngle)
, as
illustrated in
figure 6.7
, which is what you use to create circular shapes. Unlike the rect-
angles you drew, which started from the top left,
arc()
's starting point is in the center.
You'll give the
arc()
a radius in pixels, then a
startAngle
and
endAngle
, which
creates the circle.
StartAngle
is usually 0pi, whereas the
endAngle
is 2pi because it's
the circumference of a circle (using only 1pi will create half a circle).
Figure 6.7. An arc with these parameters creates a shape at 7, 22 (x, y) on a graph. Because the angle starts from 0
and goes to 2pi, it creates a full circle. If you were to make the end angle 1pi, it would produce half a circle.
