Friday, February 3, 2012

Drawing a Sprial in HTML 5

In this tutorial, we'll draw a spiral by connecting a series of  lines to form a spiral path.

 Follow these steps to draw a centered spiral:

1.Define a 2D canvas context and initialize the spiral parameters:

2. Set the spiral style:

context.lineWidth = 10;
context.strokeStyle = "#0096FF"; // blue-ish color
context.moveTo(canvas.width / 2, canvas.height / 2);

3. Rotate about the center of the canvas three times (50 iterations per full revolution) while increasing the radius by 0.75 for each iteration and draw a line segment to the
current point from the previous point with lineTo(). Finally, make the spiral visible
with stroke():

for (var n = 0; n < 150; n++) {
radius += 0.75;
// make a complete circle every 50 iterations
angle += (Math.PI * 2) / 50;
var x = canvas.width / 2 + radius * Math.cos(angle);
var y = canvas.height / 2 + radius * Math.sin(angle);
context.lineTo(x, y);

4. Embed the canvas tag inside the body of the HTML document:

5.How it works.
To draw a spiral with HTML5 canvas, we can place our drawing cursor in the center of the canvas, iteratively increase the radius and angle about the center, and then draw a super short line from the previous point to the current point. Another way to think about it is to imagine yourself as a kid standing on a sidewalk with a piece of colored chalk. Bend down and put the chalk on the sidewalk, and then start turning in a circle (not too fast, though, unless you want to get dizzy and fall over). As you spin around, move the piece of chalk outward away from you. After a few revolutions, you'll have drawn a neat little spiral.