html5螺旋动画特效

var canvas = document.getElementById('Canvas_One');
 var context = canvas.getContext('2d');
 var i=0;j=0.1;var ang;var col1;var col2;var p;
 function clear(){
  window.clearInterval(p);
 context.clearRect(0,0,400,300);
 context.strokeStyle="black";
 context.fillStyle="black";
 }
  function timing(col1,col2) {
  i=i+j;
 if(document.getElementById('R1').checked){r=15*i;ang=12;col1='rgb(255,255,0)';col2='rgba(0,255,0,0.6)';}
 if(document.getElementById('R2').checked){r=20*Math.pow(i,0.5);var ang=36;col1='orange';col2='rgba(255,0,0,0.6)';}
 if(document.getElementById('R3').checked){r=200/i;ang=24;col1='purple';col2='rgba(0,0,255,0.6)';}
 if(document.getElementById('R4').checked){r=Math.pow(1.2,i);ang=30;col1='rgb(255,255,0)';col2='rgba(0,255,0,0.6)';}
 if(document.getElementById('R5').checked){r=Math.pow(10000*Math.cos(2*i),0.5);ang=32;col1='orange';col2='rgba(255,0,0,0.6)';}
 if(document.getElementById('R6').checked){r=Math.pow(10000/i,0.5);ang=32;col1='purple';col2='rgba(0,0,255,0.6)';}
 if(document.getElementById('R7').checked){clear();}
 
context.beginPath();
context.moveTo(200,150);
var x=200+r*Math.sin(i); var y=150+r*Math.cos(i);
context.font="40px Georgia";
context.textAlign='center';
context.fillText('.',x,y);
context.fillStyle=col1;
context.lineTo(x,y);
context.strokeStyle=col2;
context.stroke();
if(i>ang){i=0;context.clearRect(0,0,400,300);}
 }
 function motion(){
 p=window.setInterval('timing()',100);
 }