用html写个元旦快乐 特效有烟花爆竹等等
时间: 2023-02-07 13:31:07 浏览: 89
在 HTML 中,你可以使用如下代码来创建一个元旦快乐的烟花效果:
```html
<html>
<head>
<title>元旦快乐</title>
</head>
<body>
<h1>元旦快乐</h1>
<canvas id="fireworks"></canvas>
<script>
// 创建画布
const canvas = document.getElementById('fireworks');
const ctx = canvas.getContext('2d');
// 设置画布的宽度和高度
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 定义烟花的颜色
const colors = ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'];
// 定义烟花的结构
function Firework(x, y) {
this.x = x;
this.y = y;
this.color = colors[Math.floor(Math.random() * colors.length)];
this.particles = [];
}
// 定义烟花粒子的结构
function Particle(x, y) {
this.x = x;
this.y = y;
this.radius = Math.random() * 3;
this.dy = -(Math.random() * 5 + 1);
this.color = colors[Math.floor(Math.random() * colors.length)];
}
// 在画布上渲染烟花
Firework.prototype.draw = function() {
ctx.beginPath();
ctx.arc(this.x, this.y, 1, 0, Math.PI * 2, false);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
};
// 在画布上渲染烟花粒子
Particle.prototype.draw = function() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
};
// 更新烟花粒子的位置
Particle.prototype.update = function() {
this.y += this.dy;
};
// 存储所有烟花的数组
const fireworks = [];
// 初始化
function init() {
for (let i = 0; i <
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)