标签：
看到一个类似于烟花爆炸类的canvas，谈不上多复杂。
源码如下：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title></title> <style type="text/css"> *{margin:0;padding:0;list-style: none;border:0;} body{background: #000;} #canvas{margin:0 auto;border:1px solid #ccc;display: block;} a{ width:100px;height:35px; line-height: 35px;background: #abcdef; color: #fff;text-align: center; display: inline-block;text-decoration: none; border-radius: 10px; } .btn{width: 215px;margin:20px auto;} </style> </head> <body> <canvas id="canvas"></canvas> <div class="btn"> <a href="#" id="beginMove">开始运动</a> <a href="#" id="stopMove">停止运动</a> </div> <script type="text/javascript"> var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var width=600; var height=600; canvas.width=width; canvas.height=height; var circularArr=[]; var beginMove=document.getElementById("beginMove"); var stopMove=document.getElementById("stopMove"); var colorArr=["#ff0000","#ff00d2","#7200ff","#1200ff","#00eaff","#00ff18","#c0ff00","#ffb400","#ff4e00","#0d6e00"]; function rnd(min, max) { return ((Math.random() * (max - min)) + min); } function circularInit(){ ctx.clearRect(0,0,canvas.width,canvas.height); ctx.font="5px Courier New"; ctx.fillStyle="#ccc"; ctx.fillText("如有问题关注微信公众号：smallBj520与我联系",canvas.width-270,canvas.height-10); for(var i=0;i<100;i++){ var circular={ x:canvas.width/2, y:canvas.height/2, r:Math.random()*6+2, vx: rnd((-1) * 10, 10), vy: rnd((-1) * 10, 10), //color:colorArr[Math.floor(Math.random()*colors.length)] }; circularArr.push(circular); circularArr[i].x+=circularArr[i].vx, circularArr[i].y+=circularArr[i].vy; if(circularArr[i].x<=0 || circularArr[i].x>=canvas.width){ circularArr[i].x=canvas.width/2; circularArr[i].y=canvas.height/2; } if(circularArr[i].y<=0 || circularArr[i].y>=canvas.height){ circularArr[i].x=canvas.width/2; circularArr[i].y=canvas.height/2; } ctx.fillStyle=colorArr[Math.floor(Math.random()*colorArr.length)]; ctx.beginPath(); ctx.arc(circularArr[i].x,circularArr[i].y,circularArr[i].r,0,Math.PI*2,false); ctx.closePath(); ctx.fill(); } } var timer=setInterval(function(){ circularInit(); },80) beginMove.onclick=function(){ console.log(timer); if(timer<1){ timer=setInterval(function(){ circularInit(); },80) } } stopMove.onclick=function(){ clearInterval(timer); timer=""; } </script> </body> </html>
其中需要注意一下几点：
1、四面八方坐标的生成：利用rnd（）函数得到一个-10~10之间的随机数值，得到坐标值；
2、通过for循环，一次性画100个随机的圆点；
3、通过定时器，循环画canvas；
标签：
原文地址：http://www.cnblogs.com/StruggleStudyhard/p/5404846.html
