- HTML5 Canvas Cookbook
- Eric Rowell
- 262字
- 2021-08-27 12:08:04
Drawing a spiral
Caution, this recipe may induce hypnosis. In this recipe, we'll draw a spiral by connecting a series of short lines to form a spiral path.
How to do it...
Follow these steps to draw a centered spiral:
- Define a 2D canvas context and initialize the spiral parameters:
window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var radius = 0; var angle = 0; - Set the spiral style:
context.lineWidth = 10; context.strokeStyle = "#0096FF"; // blue-ish color context.beginPath(); context.moveTo(canvas.width / 2, canvas.height / 2); - 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 withstroke():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); } context.stroke(); }; - Embed the canvas tag inside the body of the HTML document:
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.