特效描述：html5 canvas 彩色爆炸 小球动画特效。html5 canvas特效，有中心向四周爆炸的彩色小球，有开始和暂停按钮
代码结构
1. HTML代码
开始运动
停止运动
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.οnclick=function(){
timer=setInterval(function(){
circularInit();
},80)
}
stopMove.οnclick=function(){
clearInterval(timer);
}
