写一段html烟花代码
时间: 2023-02-08 13:22:02 浏览: 199
这是一段简单的 HTML 烟花代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>烟花效果</title>
</head>
<body>
<div id="fireworks"></div>
<script>
var c = document.getElementById("fireworks");
var ctx = c.getContext("2d");
var particles = [];
var amount = 0;
var mouse = {x:0,y:0};
var colors = ["#f44336","#e91e63","#9c27b0","#3f51b5","#03a9f4","#009688","#8bc34a","#cddc39","#ffeb3b","#ffc107","#ff9800","#ff5722"];
c.width = window.innerWidth;
c.height = window.innerHeight;
document.onmousemove = function(e){
mouse.x = e.clientX || e.pageX;
mouse.y = e.clientY || e.pageY;
}
function Particle(){
this.x = mouse.x;
this.y = mouse.y;
this.vx = Math.random()*10-5;
this.vy = Math.random()*10-5;
this.radius = Math.random()*20+10;
this.color = colors[Math.floor(Math.random()*colors.length)];
this.life = 0;
this.maxLife = Math.random()*80+20;
}
Particle.prototype.draw = function(){
this.x += this.vx;
this.y += this.vy;
if(Math.random() < 0.1){
this.vx = Math.random()*10-5;
this.vy = Math.random()*10-5;
}
this.life++;
if(this.life >= this.maxLife){
particles[particles.indexOf(this)] = new Particle();
}
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2);
ctx.fillStyle = this.color;
ctx.fill();
}
function loop(){
requestAnimationFrame(loop);
ctx.clearRect(0,0,c.width,c.height);
for(var i = 0; i < amount; i++){
particles[i].draw();
}
}
function init(){
for(var i = 0; i < 150; i++){
particles.push(new Particle());
}
amount = particles.length;
}
init();
loop();
</script>
</
阅读全文