写一段放烟花的html代码
时间: 2023-03-07 13:27:04 浏览: 164
1_烟花代码.html
<html>
<head>
<title>烟花效果</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d"); // Create an array of particles
var particles = [];
for (var i = 0; i < 50; i++) {
particles.push(new create_particle());
} function create_particle() {
// Random position on the canvas
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height; // Random velocity
this.vx = Math.random() * 10 - 5;
this.vy = Math.random() * 10 - 5; // Random color
var r = Math.random() * 255 >> 0;
var g = Math.random() * 255 >> 0;
var b = Math.random() * 255 >> 0;
this.color = "rgba(" + r + ", " + g + ", " + b + ", 0.5)"; // Random size
this.radius = Math.random() * 20 + 20;
} // Draw particles
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < particles.length; i++) {
var p = particles[i];
ctx.beginPath();
ctx.fillStyle = p.color;
ctx.arc(p.x, p.y, p.radius, Math.PI * 2, false);
ctx.fill(); // Move particles
p.x += p.vx;
p.y += p.vy; // Replace lost particles
if (p.x < -50 || p.y < -50 || p.x > canvas.width + 50 || p.y > canvas.height + 50) {
// Remove the particle from the array
particles[i] = new create_particle();
}
}
} setInterval(draw, 30);
</script>
</body>
</html>
阅读全文