首页 > 代码库 > 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 }());
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。