JavaScript graphic example: Archimedes spiral

1. Archimedes spiral

Archimedes spiral is also known as “constant velocity spiral”. When a point P moves along the moving ray OP at the same speed, the ray rotates around the point o at the same angular speed. The trajectory of point P is called “Archimedean spiral”.

The Cartesian coordinate equation of Archimedes spiral is as follows:

r=10*(1+t)

x=r*cos(t * 360)

y=r*sin(t *360)

Write the following HTML code.

  function draw(id)

  {

     var canvas=document.getElementById(id);

     if (canvas==null)

        return false;

     var context=canvas.getContext(‘2d’);

     context.fillStyle=”#EEEEFF”;

     context.fillRect(0,0,300,300);

     context.strokeStyle=”red”;

     context.lineWidth=2;

     var dig=Math.PI/32;

     context.beginPath();

     context.moveTo(150,150);

     for (var i=1;i<=256;i++)

     {

        x=150+5*i*dig*Math.sin(i*dig);

        y=150+5*i*dig*Math.cos(i*dig);

        context.lineTo(x,y);

     }

     context.stroke();

   }