HTML and CSS Reference
In-Depth Information
FIGURE 5.12
An animated spiral
going around, and around, and
around.
The
rotate
method rotates from the top left (0, 0) position by
default. This wouldn't do at all, and if I rotated the canvas from
this position, the spiral would circulate offscreen, as if it was on
a pendulum. Instead I need to rotate from the centre of the spi-
ral, which I'll place in the centre of the canvas. Therefore I need
to rotate from the centre of the canvas.
The
translate
method can help me here. It moves the 0, 0 coor-
dinate to a new position.
Figure 5.13
shows that I've drawn a dot
and also shows the arguments I passed to translate. Each time
translate
runs it sets the new coordinates to 0, 0.
FIGURE 5.13
Example of how
translate
can move the origin
points of the canvas.
Now to achieve my rotating spiral I need to initialise the canvas
using
translate
, and then use
setInterval
to redraw my spiral
(note that
drawSpiral
is my own function, rather than native,
