<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我的烟花</title>
<script src="js/jquery-3.2.1.js"></script>
</head>
<body bgcolor="#000000">
<canvas id="canvas" ></canvas>
<script>
window.requestAnimFrame = ( function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ) {
window.setTimeout( callback, 1000 / 60 );
};
})();
var canvas = document.getElementById("canvas"),
ctx=canvas.getContext("2d"),
mousedown =false,
hue = 120,
cw = window.innerWidth,
ch = window.innerHeight,
fire = [],
explosive = [],
limitclick = 0,
defaultclick = 5,
limitrandom = 0,
defaultrandom = 20,
mx,
my;
canvas.width = cw;
canvas.height = ch ;
canvas.addEventListener('mousedown',function(e){
e.preventDefault();
mousedown =true;
});
canvas.addEventListener('mouseup',function(e){
e.preventDefault();
mousedown = false;
});
canvas.addEventListener('mousemove',function(e){
mx=e.pageX;
my=e.pageY;
});
function random( min, max ) {
return Math.random() * ( max - min ) + min;
}
function calculatedistance(p1x,p1y,p2x,p2y){
var distancex = p2x - p1x,
distancey = p2y - p1y;
return Math.sqrt(Math.pow(distancex,2) + Math.pow(distancey,2));
}
function Fire(sx,sy,tx,ty){
this.x = sx;
this.y = sy;
this.sx = sx;
this.sy = sy;
this.tx = tx;
this.ty = ty;
this.diameter = 1;
this.angle = Math.atan2(ty-sy,tx-sx);
this.speed = 2;
this.accelerate = 1.05;
this.distance = calculatedistance(this.sx,this.sy,this.tx,this.ty);
this.coordinates = [];
this.coordinatescount = 4;
while(this.coordinatescount--){
this.coordinates.push([this.x,this.y]);
this.brightness =random( 50, 70 );
}
}
Fire.prototype.draw = function(){
ctx.beginPath();
ctx.moveTo(this.coordinates[this.coordinates.length - 1][0],this.coordinates[this.coordinates.length - 1][1]);
ctx.lineTo(this.x,this.y);
ctx.strokeStyle ='hsl( ' + hue + ' ,100%,' + this.brightness + '%)';
ctx.stroke();
ctx.beginPath();
ctx.arc(this.tx,this.ty,this.diameter,0,2*Math.PI);
ctx.stroke();
}
Fire.prototype.update = function(index){
this.coordinates.pop();
this.coordinates.unshift([this.x,this.y]);
if(this.diameter>=7){
this.diameter = 1;
}else{
this.diameter +=0.2;
}
this.speed *= this.accelerate;
var vx = Math.cos(this.angle)*this.speed,
vy = Math.sin(this.angle)*this.speed;
this.currentdistance = calculatedistance(this.sx,this.sy,this.x+vx,this.y+vy);
if(this.currentdistance>=this.distance){
createexplosive(this.tx,this.ty);
fire.splice(index,1);
}else{
this.x += vx;
this.y += vy;
}
}
function Explosive(p1x,p1y){
this.x = p1x;
this.y = p1y;
this.sx = p1x;
this.sy = p1y;
this.angle = random(0,2*Math.PI);
this.speed =random(0,10);
this.slowspeed= 0.95;
this.hue = random(hue - 20,hue + 20);
this.brightness = random( 50, 80 );
this.alpha = 1;
this.decay = random( 0.015, 0.03 );
this.coordinates = [];
this.coordinatecount = 5;
while(this.coordinatecount--){
this.coordinates.push([this.x,this.y]);
}
}
Explosive.prototype.draw = function(){
ctx.beginPath();
ctx.moveTo(this.coordinates[this.coordinates.length - 1 ][0],this.coordinates[this.coordinates.length - 1 ][1]);
ctx.lineTo(this.x,this.y);
ctx.strokeStyle = 'hsla(' + this.hue + ',100%,' + this.brightness + ',' + this.alpha + ')';
ctx.stroke();
}
Explosive.prototype.update = function(index){
this.coordinates.pop();
this.coordinates.unshift([this.x,this.y]);
this.speed *= this.slowspeed;
this.alpha -= this.decay;
this.x += Math.cos(this.angle)*this.speed,
this.y += Math.sin(this.angle)*this.speed + 0.6;
if(this.alpha<=0){
explosive.splice(index,1);
}
}
function createexplosive(x,y){
var count = 100;
while(count--){
explosive.push(new Explosive(x,y));
}
}
function start(){
requestAnimFrame( start );
hue +=10;
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect( 0, 0, cw, ch );
ctx.globalCompositeOperation = 'lighter';
var i = fire.length;
while(i--){
fire[i].draw();
fire[i].update(i);
}
var i = explosive.length;
while(i--){
explosive[i].draw();
explosive[i].update(i);
}
if(limitclick > defaultclick){
if(mousedown){
fire.push(new Fire(cw/2,ch,mx,my));
limitclick = 0;
}
}else{
limitclick++;
}
if(limitrandom >defaultrandom){
if(!mousedown){
fire.push(new Fire(cw/2,ch,random(0,cw),random(0,ch)));
limitrandom = 0;
}
}
else{
limitrandom++;
}
}
window.onload = start;
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>我的烟花</title>
<script src="js/jquery-3.2.1.js"></script>
</head>
<body bgcolor="#000000">
<canvas id="canvas" ></canvas>
<script>
window.requestAnimFrame = ( function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ) {
window.setTimeout( callback, 1000 / 60 );
};
})();
var canvas = document.getElementById("canvas"),
ctx=canvas.getContext("2d"),
mousedown =false,
hue = 120,
cw = window.innerWidth,
ch = window.innerHeight,
fire = [],
explosive = [],
limitclick = 0,
defaultclick = 5,
limitrandom = 0,
defaultrandom = 20,
mx,
my;
canvas.width = cw;
canvas.height = ch ;
canvas.addEventListener('mousedown',function(e){
e.preventDefault();
mousedown =true;
});
canvas.addEventListener('mouseup',function(e){
e.preventDefault();
mousedown = false;
});
canvas.addEventListener('mousemove',function(e){
mx=e.pageX;
my=e.pageY;
});
function random( min, max ) {
return Math.random() * ( max - min ) + min;
}
function calculatedistance(p1x,p1y,p2x,p2y){
var distancex = p2x - p1x,
distancey = p2y - p1y;
return Math.sqrt(Math.pow(distancex,2) + Math.pow(distancey,2));
}
function Fire(sx,sy,tx,ty){
this.x = sx;
this.y = sy;
this.sx = sx;
this.sy = sy;
this.tx = tx;
this.ty = ty;
this.diameter = 1;
this.angle = Math.atan2(ty-sy,tx-sx);
this.speed = 2;
this.accelerate = 1.05;
this.distance = calculatedistance(this.sx,this.sy,this.tx,this.ty);
this.coordinates = [];
this.coordinatescount = 4;
while(this.coordinatescount--){
this.coordinates.push([this.x,this.y]);
this.brightness =random( 50, 70 );
}
}
Fire.prototype.draw = function(){
ctx.beginPath();
ctx.moveTo(this.coordinates[this.coordinates.length - 1][0],this.coordinates[this.coordinates.length - 1][1]);
ctx.lineTo(this.x,this.y);
ctx.strokeStyle ='hsl( ' + hue + ' ,100%,' + this.brightness + '%)';
ctx.stroke();
ctx.beginPath();
ctx.arc(this.tx,this.ty,this.diameter,0,2*Math.PI);
ctx.stroke();
}
Fire.prototype.update = function(index){
this.coordinates.pop();
this.coordinates.unshift([this.x,this.y]);
if(this.diameter>=7){
this.diameter = 1;
}else{
this.diameter +=0.2;
}
this.speed *= this.accelerate;
var vx = Math.cos(this.angle)*this.speed,
vy = Math.sin(this.angle)*this.speed;
this.currentdistance = calculatedistance(this.sx,this.sy,this.x+vx,this.y+vy);
if(this.currentdistance>=this.distance){
createexplosive(this.tx,this.ty);
fire.splice(index,1);
}else{
this.x += vx;
this.y += vy;
}
}
function Explosive(p1x,p1y){
this.x = p1x;
this.y = p1y;
this.sx = p1x;
this.sy = p1y;
this.angle = random(0,2*Math.PI);
this.speed =random(0,10);
this.slowspeed= 0.95;
this.hue = random(hue - 20,hue + 20);
this.brightness = random( 50, 80 );
this.alpha = 1;
this.decay = random( 0.015, 0.03 );
this.coordinates = [];
this.coordinatecount = 5;
while(this.coordinatecount--){
this.coordinates.push([this.x,this.y]);
}
}
Explosive.prototype.draw = function(){
ctx.beginPath();
ctx.moveTo(this.coordinates[this.coordinates.length - 1 ][0],this.coordinates[this.coordinates.length - 1 ][1]);
ctx.lineTo(this.x,this.y);
ctx.strokeStyle = 'hsla(' + this.hue + ',100%,' + this.brightness + ',' + this.alpha + ')';
ctx.stroke();
}
Explosive.prototype.update = function(index){
this.coordinates.pop();
this.coordinates.unshift([this.x,this.y]);
this.speed *= this.slowspeed;
this.alpha -= this.decay;
this.x += Math.cos(this.angle)*this.speed,
this.y += Math.sin(this.angle)*this.speed + 0.6;
if(this.alpha<=0){
explosive.splice(index,1);
}
}
function createexplosive(x,y){
var count = 100;
while(count--){
explosive.push(new Explosive(x,y));
}
}
function start(){
requestAnimFrame( start );
hue +=10;
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect( 0, 0, cw, ch );
ctx.globalCompositeOperation = 'lighter';
var i = fire.length;
while(i--){
fire[i].draw();
fire[i].update(i);
}
var i = explosive.length;
while(i--){
explosive[i].draw();
explosive[i].update(i);
}
if(limitclick > defaultclick){
if(mousedown){
fire.push(new Fire(cw/2,ch,mx,my));
limitclick = 0;
}
}else{
limitclick++;
}
if(limitrandom >defaultrandom){
if(!mousedown){
fire.push(new Fire(cw/2,ch,random(0,cw),random(0,ch)));
limitrandom = 0;
}
}
else{
limitrandom++;
}
}
window.onload = start;
</script>
</body>
</html>