用html写一段烟花代码

<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var fireworks = [];
var particles = [];
var hue = 120;
var limiterTotal = 5;
var limiterTick = 0;
var timerTotal = 80;
var timerTick = 0;
var mousedown = false;
var mouseX = 0;
var mouseY = 0;
var width = window.innerWidth;
var height = window.innerHeight;

canvas.width = width;
canvas.height = height;

window.onmousedown = function(e){
mousedown = true;
}

window.onmouseup = function(e){
mousedown = false;
}

window.onmousemove = function(e){
mouseX = e.clientX;
mouseY = e.clientY;
}

window.onresize = function(){
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
}

class Firework{
constructor(x, y){
this.x = x;
this.y = y;
this.sx = 0;
this.sy = 0;
this.tx = width * Math.random();
this.ty = height * Math.random();
this.distanceToTarget = calculateDistance(this.x, this.y, this.tx, this.ty);
this.distanceTraveled = 0;
this.coordinates = [];
this.coordinateCount = 3;
while(this.coordinateCount--){
this.coordinates.push([this.x, this.y]);
}
this.angle = Math.atan2(this.ty - this.y, this.tx - this.x);
this.speed = 2;
this.acceleration = 1.05;
this.brightness = Math.random() * (50 - 20) + 20;
this.targetRadius = 1;
}

draw(){
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.targetRadius, 0, Math.PI * 2);
ctx.stroke();
}

update(index){
this.coordinates.pop();
this.coordinates.unshift([this.x, this.y]);
this.speed *= this.acceleration;
var vx = Math.cos(this.angle) * this.speed;
var vy = Math.sin(this.angle) * this.speed;
this.distanceTraveled = calculateDistance(this.x, this.y, this.tx, this.ty);
if(this.distanceTraveled <= this.distanceToTarget){
createParticles(this.tx, this.ty);
fireworks.splice(index, 1);
} else {
this.x += vx;
this.y += vy;
}
}
}

class Particle{
constructor(x, y){
this.x = x;
this.y = y;
this.coordinates = [];
this.coordinateCount = 5;
while(this.coordinateCount--){
this.coordinates.push([this.x, this.y]);
}
this.angle = Math.random() * (Math.PI * 2);
this.speed = Math.random() * (1.5 - .2) + .2;
this.friction = .95;
this.gravity = 1;
this.hue = hue;
this.brightness = Math.random() * (50 - 20) + 20;
this.alpha = 1;
this.decay = Math.random() * (0.05 - 0.01) + .01;
}

draw(){
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();
}

update(){
this.coordinates.pop();
this.coordinates.unshift([this.x, this.y]);
this.speed *= this.friction;
this.x += Math.cos(this.angle) * this.speed;
this.y += Math.sin(this.angle) * this.speed + this.gravity;
this.alpha -= this.decay;
if(this.alpha <= this.decay){
particles.splice(index, 1);
}
}
}

function calculateDistance(x1, y1, x2, y2){
var xDistance = x2 - x1;
var yDistance = y2 - y1;
return Math.sqrt(Math.pow(xDistance, 2) + Math.pow(yDistance, 2));
}

function createParticles(x, y){
var particleCount = 100;
while(particleCount--){
particles.push(new Particle(x, y));
}
}

function loop(){
hue += 0.5;
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(0, 0, width, height);
ctx.globalCompositeOperation = 'lighter';
var i = fireworks.length;
while(i--){
fireworks[i].draw();
fireworks[i].update(i);
}
var i = particles.length;
while(i--){
particles[i].draw();
particles[i].update();
}
if(timerTick >= timerTotal){
if(!mousedown){
fireworks.push(new Firework(width / 2, height));
timerTick = 0;
}
} else {
timerTick++;
}
if(limiterTick >= limiterTotal){
if(mousedown){
fireworks.push(new Firework(mouseX, mouseY));
limiterTick = 0;
}
} else {
limiterTick++;
}
requestAnimFrame(loop);
}

window.onload = loop;
</script>这是一段用HTML写的烟花代码，它的作用是在浏览器中创建烟花爆炸的效果。