Edit in JSRun

canvas=document.getElementById("canvas");
canvas1=document.getElementById("canvas1");
canvas2=document.getElementById("canvas2");
canvas3=document.getElementById("canvas3");
canvas4=document.getElementById("canvas4");
canvas5=document.getElementById("canvas5");


var ctx=canvas.getContext("2d");
var ctx1=canvas1.getContext("2d");
var ctx2=canvas2.getContext("2d");
var ctx3=canvas3.getContext("2d");
var ctx4=canvas4.getContext("2d");
var ctx5=canvas5.getContext("2d");


var startPostion=0
var startPostion1=0
var startPostion2=0
var startPostion3=0
var startPostion4=0
var startPostion5=0
var time=0
var myProcess;
var r="21"
var g="96"
var b="f3"
var isGoing=false;

	function drawExplosive(initialVelocity,initialVelocity1,initialVelocity2,initialVelocity3,initialVelocity4,initialVelocity5){
	if(time<30){
	ctx.clearRect(startPostion-1,-1,1000,500); 
	ctx1.clearRect(startPostion1-1,-1,1000,500); 
	ctx2.clearRect(startPostion2-1,-1,1000,500); 
	ctx3.clearRect(startPostion3-1,-1,1000,500); 
	ctx4.clearRect(startPostion4-1,-1,1000,500); 
	ctx5.clearRect(startPostion5-1,-1,1000,500); 
	
	
	ctx.fillStyle="#"+r+g+b;
	ctx1.fillStyle="#"+r+g+b;
	ctx2.fillStyle="#"+r+g+b;
	ctx3.fillStyle="#"+r+g+b;
	ctx4.fillStyle="#"+r+g+b;
	ctx5.fillStyle="#"+r+g+b;
	
	
	ctx.fillRect(startPostion+initialVelocity,0,20,20);
	ctx1.fillRect(startPostion1+initialVelocity1,0,20,20);
	ctx2.fillRect(startPostion2+initialVelocity2,0,20,20);
	ctx3.fillRect(startPostion3+initialVelocity3,0,20,20);
	ctx4.fillRect(startPostion4+initialVelocity4,0,20,20);
	ctx5.fillRect(startPostion5+initialVelocity5,0,20,20);
	
	startPostion+=initialVelocity
	startPostion1+=initialVelocity1
	startPostion2+=initialVelocity2
	startPostion3+=initialVelocity3
	startPostion4+=initialVelocity4
	startPostion5+=initialVelocity5
	
	time++
	
	r=parseInt(r,16)
	g=parseInt(g,16)
	b=parseInt(b,16)
	if(r<251){
	r+=5
	}
	if(b<251){
	b+=5
	}
	if(g<251){
	g+=5
	}
	r=r.toString(16)
	g=g.toString(16)
	b=b.toString(16)
	
	}
	else{
	clearInterval(myProcess)
	startPostion=0;
	startPostion1=0
	startPostion2=0
	startPostion3=0
	startPostion4=0
	startPostion5=0
	time=0;
	r="21"
	g="96"
	b="f3"

	ctx.restore();
	ctx1.restore();
	ctx2.restore();
	ctx3.restore();
	ctx4.restore();
	ctx5.restore();
	
	ctx.clearRect(0,0,1000,500); 
	ctx1.clearRect(0,0,1000,500); 
	ctx2.clearRect(0,0,1000,500); 
	ctx3.clearRect(0,0,1000,500); 
	ctx4.clearRect(0,0,1000,500); 
	ctx5.clearRect(0,0,1000,500); 
	
	isGoing=false;
	}
	}

//////////////////爆炸类//////////////////////////

function explosive() {
		var initialVelocity = Math.floor(10*Math.random()+1); 
		var initialVelocity1 = Math.floor(10*Math.random()+1); 
		var initialVelocity2 = Math.floor(10*Math.random()+1); 
		var initialVelocity3 = Math.floor(10*Math.random()+1); 
		var initialVelocity4 = Math.floor(10*Math.random()+1); 
		var initialVelocity5 = Math.floor(10*Math.random()+1); 
		
		var initialAngle = Math.floor(360*Math.random());
		var initialAngle1 = Math.floor(360*Math.random());
		var initialAngle2 = Math.floor(360*Math.random());
		var initialAngle3 = Math.floor(360*Math.random());
		var initialAngle4 = Math.floor(360*Math.random());
		var initialAngle5 = Math.floor(360*Math.random());
		
		ctx.save();
		ctx1.save();
		ctx2.save();
		ctx3.save();
		ctx4.save();
		ctx5.save();
		
		
		myProcess = setInterval(function(){drawExplosive(initialVelocity,initialVelocity1,initialVelocity2,initialVelocity3,initialVelocity4,initialVelocity5)},16.7)
		
		ctx.translate(500, 250)
		ctx1.translate(500, 250)
		ctx2.translate(500, 250)
		ctx3.translate(500, 250)
		ctx4.translate(500, 250)
		ctx5.translate(500, 250)
		
		
		ctx.rotate(initialAngle * Math.PI/180)	
		ctx1.rotate(initialAngle1 * Math.PI/180)	
		ctx2.rotate(initialAngle2 * Math.PI/180)	
		ctx3.rotate(initialAngle3 * Math.PI/180)
		ctx4.rotate(initialAngle4 * Math.PI/180)	
		ctx5.rotate(initialAngle5 * Math.PI/180)	
	  }

		



//////////////////爆炸类//////////////////////////
function bloom(){
explosive()
isGoing=true;
}


addEventListener("keydown", function (e) {
	if(!isGoing){
	bloom();
	}
}, false);
按任意键
<canvas id="canvas" width="1000" height="500" style="left:100px;position:absolute;border:1px solid #4caf50;z-index:421;"></canvas>
<canvas id="canvas1" width="1000" height="500" style="left:100px;position:absolute;border:1px solid #4caf50;z-index:421;"></canvas>
<canvas id="canvas2" width="1000" height="500" style="left:100px;position:absolute;border:1px solid #4caf50;z-index:421;"></canvas>
<canvas id="canvas3" width="1000" height="500" style="left:100px;position:absolute;border:1px solid #4caf50;z-index:421;"></canvas>
<canvas id="canvas4" width="1000" height="500" style="left:100px;position:absolute;border:1px solid #4caf50;z-index:421;"></canvas>
<canvas id="canvas5" width="1000" height="500" style="left:100px;position:absolute;border:1px solid #4caf50;z-index:421;"></canvas>
body {TEXT-ALIGN: center;}
canvas {
margin-left: auto;
margin-right: auto;
}