标签：style blog http color java os io for
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 }());
标签：style blog http color java os io for
原文地址：http://www.cnblogs.com/wuxiandiejia/p/3901314.html
