首页烟花代码html

烟花代码html

时间: 2023-06-30 12:14:08 浏览: 107

以下是一个简单的HTML代码示例，用于在网页上展示烟花效果： ```html <!DOCTYPE html> <html> <head> <title>烟花效果</title> <meta charset="UTF-8"> <style type="text/css"> #fireworks { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: black; z-index: -1; } </style> </head> <body> <div id="fireworks"></div> <script type="text/javascript"> // 创建canvas元素 var canvas = document.createElement("canvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; document.getElementById("fireworks").appendChild(canvas); // 获取绘图上下文 var ctx = canvas.getContext("2d"); // 绘制烟花 function drawFirework(x, y, color) { ctx.beginPath(); ctx.arc(x, y, 3, 0, 2 * Math.PI); ctx.fillStyle = color; ctx.fill(); } // 随机生成颜色 function randomColor() { var colors = ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#00FFFF", "#FF00FF"]; return colors[Math.floor(Math.random() * colors.length)]; } // 随机生成烟花位置和颜色 function randomFirework() { return { x: Math.random() * canvas.width, y: Math.random() * canvas.height, color: randomColor() }; } // 绘制烟花效果 function fireworks() { // 清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制烟花 for (var i = 0; i < 50; i++) { var firework = randomFirework(); drawFirework(firework.x, firework.y, firework.color); } // 延时调用函数 setTimeout(function() { requestAnimationFrame(fireworks); }, 1000 / 60); } // 启动烟花效果 fireworks(); </script> </body> </html> ``` 此代码会在浏览器中创建一个全屏的黑色背景，并在上面绘制随机颜色的小圆点，模拟烟花效果。可以通过修改代码中的参数来自定义烟花效果的颜色、数量和速度等。

阅读全文