给我一个放烟花的html代码

在 HTML 中放置烟花的代码如下： ```html <!DOCTYPE html> <html> <head> <title>烟花</title> </head> <body> <h1>烟花</h1> <canvas id="fireworks"></canvas> <script> // 画布的宽度和高度 const canvasWidth = 800; const canvasHeight = 600; // 获取画布 const canvas = document.getElementById("fireworks"); canvas.width = canvasWidth; canvas.height = canvasHeight; // 获取画布的绘图上下文 const context = canvas.getContext("2d"); // 初始化烟花 let fireworks = []; for (let i = 0; i < 50; i++) { fireworks.push({ x: Math.random() * canvasWidth, y: Math.random() * canvasHeight, radius: Math.random() * 4 + 1, color: `hsl(${Math.random() * 360}, 100%, 50%)`, }); } // 渲染烟花 function render() { // 清空画布 context.clearRect(0, 0, canvasWidth, canvasHeight); // 绘制烟花 fireworks.forEach(firework => { context.beginPath(); context.arc(firework.x, firework.y, firework.radius, 0, 2 * Math.PI); context.fillStyle = firework.color; context.fill(); }); } // 每隔一段时间渲染一次 setInterval(render, 50); </script> </body> </html> ``` 上面的代码会创建一个名为 "fireworks" 的画布，并在画布上绘制 50 个随机的彩色圆圈，每隔 50 毫秒渲染一次画布，形成烟花的效果。希望这能帮到你。

阅读全文

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通