html5 canvas爆炸,html5 canvas彩色爆炸的小球动画特效

特效描述：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);

}