HTML and CSS Reference
In-Depth Information
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="500">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
Moving in a Simple Spiral
There are many complicated ways to move an object on a spiral path. One such way
would be to use the Fibonacci sequence, which describes a pattern seen in nature that
appears to create perfect spirals. The Fibonacci sequence starts with the number 0, and
continues with each subsequent number calculated as the sum of the two previous
numbers in the sequence. Each subsequent rotation of the spiral is the sum of the two
previous numbers (1, 2, 3, 5, 8, 13, 21, 34, 55, 89...). However, as you might imagine,
the math used to create this sequence is quite involved, and it is also difficult to translate
to object movement.
For our purposes, we can create a simple spiral by increasing the radius of the circle
path on each call to drawScreen() . If we take the code from Example 5-9 , we would add
of the circle. We create this new variable in canvasApp() :
Then, in drawScreen() , we add the following code to increase the radius of the circle
every time we move the object: