HTML and CSS Reference
In-Depth Information
Drawing Arcs
The
arc()
command is one that you'll likely use a lot and will be important in this example. The
arc()
command
takes the following parameters:
arc(x, y, radius, start, end, counterclockwise)
The first two parameters specify the x and y coordinates of the center point. The third parameter specifies
the radius. The fourth and fifth parameters determine the starting and ending point of the arc. These are
specified as an angle from the x axis. The 0° angle is the right-hand side of the circle; a 90° angle would be the
bottom edge of the circle. The angles are specified in radians, however, not degrees.
Unless you're drawing a full circle, the direction of the arc is important. For example if you drew an arc from
0° to 90°, the arc would be ¼ of a circle, from the right-hand side to the bottom. However, using the same end
points but drawing in a counter-clockwise direction, that arc would be ¾ of the circle. The final parameter, if true,
indicates that the arc should be draw in a counter-clock-wise direction. This parameter is optional. If you don't
specify, it will draw the arc in a clockwise direction.
Using Transformations
At first, transformations in canvas may seem a bit confusing but they can be quite helpful once you understand
how they work. First, transformations have no effect on what has already been drawn on the canvas. Instead,
transformations modify the grid system that will be used to draw subsequent shapes. I will demonstrate three
types of transformations in this chapter:
•
Translating
•
Rotating
•
As I mentioned earlier, a canvas
element
uses a grid system where the origin is at the top-left corner of the
canvas. So a point at 10, 20 will be 10 pixels to the right and 20 pixels down from that corner. Transformations
simply adjust the grid system. For example, the following command will shift the origin 100 pixels to the right
and 50 pixels down:
context.translate (100, 50);
Scaling
This is illustrated in Figure
10-6
.
0, 0
Translate y = 50
0, 0
Translate
x = 100
Figure 10-6.
Translating the context origin
