首页 > 代码库 > canvas画简单圆形动画

canvas画简单圆形动画

HTML:

 1 <html> 2 <head> 3     <title>canvas画圆</title> 4     <meta http-equiv="content-type" content="text/html" charset="utf-8"> 5     <link rel="stylesheet" href="circle.css"/> 6 </head> 7 <body> 8     <canvas width="1000" height="800">你的浏览器不支持canvas</canvas> 9     <script type="text/javascript" src="circle.js"></script>10 </body>11 </html>

 

JS:

 1 var a=0,//确定图形的旋转角度变量 2     count= 0,//确定圆的个数 3     colors=[];//存储第一次画的圆的颜色 4 (function drawCircle(){ 5     var canvas=document.getElementsByTagName("canvas")[0]; 6     if(canvas.getContext){ 7         //浏览器有getContext方法的话获取2d上下文 8         var ctx=canvas.getContext("2d"); 9         ctx.save();//保存一下初始的画布状态10         ctx.beginPath();//开始画线11         ctx.translate(500,400);//将画图的原点移动到画布中间12         ctx.rotate(30*a*Math.PI/180);//每个圆之间间隔30度13         ctx.fillStyle="rgb("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)14         +","+parseInt(Math.random()*256)+")";//随机颜色15         colors.push(ctx.fillStyle);//保存颜色值16         ctx.arc(40+10*a,0,5+2*a,0,Math.PI*2,true);//画圆,每个圆的大小依次增大17         ctx.closePath();//结束画线18         ctx.fill();//填充19         ctx.restore();//恢复到save的状态20     }21     count++;22     a++;23     var circle1=setTimeout(drawCircle,100);24     if(count===15){25         clearTimeout(circle1);//共画7个圆26         var b=0;27         (function circleMove(){28             ctx.clearRect(0,0,1000,800);//清除画布29             for(var i=b;i<b+15;i++){30                 ctx.save();31                 ctx.beginPath();32                 ctx.translate(500,400);33                 ctx.rotate(30*i*Math.PI/180);34                 ctx.arc(40+10*(i-b),0,5+2*(i-b),0,Math.PI*2,true);35                 ctx.fillStyle=colors[i-b];36                 ctx.closePath();37                 ctx.fill();38                 ctx.restore();39             }40         b++;41         var circle2=setTimeout(circleMove,100);42             if(b===12){43                 b=0;44             }45         }());46     }47 }());