html5螺旋动画特效

html5螺旋动画特效1181
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); }

也许你还喜欢