请使用javascript我做一个的HTML动画效果，能够点击屏幕后，放出烟花。要求：代码详细
时间: 2024-05-09 21:21:54 浏览: 9
实现烟花动画效果
以下是利用HTML5和javascript实现的烟花动画效果示例代码：
HTML代码：
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>烟花动画效果</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000;
}
canvas {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="firework.js"></script>
</body>
</html>
```
注释：在HTML文档中，我们创建了一个canvas元素，并加上id属性值为"canvas"。我们在<head>标签中加上了一个样式表，设置了body元素的背景颜色为黑色（#000），并将canvas元素定位为fixed固定位置，并位于其最上面（z-index: -1），以防止其覆盖文档中的其他元素。我们还通过<script>标签引入了一个名为"firework.js"的JavaScript文件，用于实现烟花动画效果。
JavaScript代码：
```
//控制台输出欢迎信息
console.log("欢迎使用烟花动画效果！");
//定义变量
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
WIDTH = window.innerWidth,
HEIGHT = window.innerHeight,
mx, my;
//设置画布尺寸
canvas.width = WIDTH;
canvas.height = HEIGHT;
//烟花类
class Firework {
constructor(x, y, vx, vy, size, hue) {
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.size = size;
this.hue = hue;
this.alpha = 1;
this.sparks = [];
//生成火花
for (var i = 0; i < 30; i++) {
var speed = (Math.random() * 4) + 2,
direction = (Math.random() * Math.PI * 2),
sparkVX = Math.cos(direction) * speed,
sparkVY = Math.sin(direction) * speed;
this.sparks.push({x: this.x, y: this.y, vx: sparkVX, vy: sparkVY, size: Math.random() * 3 + 1});
}
}
//绘制烟花
draw() {
ctx.beginPath();
ctx.fillStyle = `hsla(${this.hue}, 100%, 50%, ${this.alpha})`;
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
this.sparks.forEach(spark => {
ctx.beginPath();
ctx.fillStyle = `hsla(${this.hue}, 100%, 50%, ${this.alpha})`;
ctx.arc(spark.x, spark.y, spark.size, 0, Math.PI * 2);
ctx.fill();
});
}
//更新烟花
update() {
this.x += this.vx;
this.y += this.vy + 0.08; //加入重力效果
this.alpha -= 0.008; //火花渐隐
this.sparks.forEach(spark => {
spark.x += spark.vx;
spark.y += spark.vy + 0.03; //加入重力效果
spark.size -= 0.03; //火花渐隐
});
}
}
//烟花数组
var fireworks = [];
//鼠标移动事件
function mousemove(e) {
mx = e.clientX - canvas.offsetLeft + document.documentElement.scrollLeft;
my = e.clientY - canvas.offsetTop + document.documentElement.scrollTop;
}
//鼠标点击事件
function click(e) {
var size = Math.random() * 4 + 4,
vx = (mx - WIDTH / 2) * 0.03,
vy = (my - HEIGHT * 0.75) * 0.03,
hue = Math.floor(Math.random() * 360);
fireworks.push(new Firework(WIDTH / 2, HEIGHT * 0.75, vx, vy, size, hue));
}
//循环动画
function loop() {
//清空画布
ctx.fillStyle = "rgba(0,0,0,0.1)";
ctx.fillRect(0, 0, WIDTH, HEIGHT);
//更新和绘制烟花
fireworks.forEach(firework => {
firework.draw();
firework.update();
});
//移除已经燃尽的烟花
fireworks = fireworks.filter(firework => firework.alpha > 0);
//继续动画循环
requestAnimationFrame(loop);
}
//绑定事件
canvas.addEventListener("mousemove", mousemove);
canvas.addEventListener("click", click);
//启动循环动画
loop();
```
注释：JavaScript代码实现了烟花动画效果的核心逻辑。我们定义了一个名为"Firework"的类，用于创建每个烟花对象。在该类中，我们定义了烟花的属性（如x坐标、y坐标、水平速度、垂直速度、烟花大小、颜色等），并在constructor构造函数中使用循环语句生成了烟花涌现时的多个火花（利用随机速度和角度产生多个火花），并存放在一个名为"sparks"数组中。接着，我们定义了Firework类的两个方法分别用于绘制和更新烟花对象。在draw()方法中，我们使用了Canvas API绘制了烟花和其包含的多个火花。在update()方法中，我们更新了烟花和火花的坐标位置、大小和透明度，模拟了烟花消失的效果。接着，我们定义了一个名为"fireworks"的数组，用于存放多个烟花对象。我们还定义了两个函数，分别处理鼠标移动事件和鼠标点击事件。在mousemove()函数中，我们获取了鼠标的坐标位置，并存储在mx和my变量中。在click()函数中，我们利用鼠标的坐标位置、随机速度和随机颜色创建了一个新的烟花对象，并将其添加到fireworks数组中。最后，我们定义了一个名为"loop"的循环函数，用于控制烟花动画的更新和绘制。在该函数中，我们先使用Canvas API清空了画布，然后循环遍历了fireworks数组中的所有烟花对象，调用其draw()和update()方法更新和绘制烟花。接着，我们通过过滤器函数将已经烧完的烟花对象从数组中移除。最后，我们利用requestAnimationFrame()函数继续循环更新和绘制烟花动画。至此，我们就实现了一个简单的烟花动画效果。
相关推荐
最新推荐
javascript 控制 html元素 显示/隐藏实现代码
1。编写js函数 [removed] function display(y){$(y).style.... 要显示/隐藏的html元素加上 id 属性 <table> ”menu”> 控制这个tr的显示/隐藏</td> </tr> </table> 3，添加按钮，链接等触发 js 函数 <input type=”b
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
主要介绍了javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法,涉及javascript鼠标事件及页面元素样式操作的相关技巧,需要的朋友可以参考下
用html5的canvas和JavaScript创建一个绘图程序的简单实例
下面小编就为大家带来一篇用html5的canvas和JavaScript创建一个绘图程序的简单实例。小编觉得挺不错的， 现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript实现x秒后自动跳转到一个页面
今天看视频学习时学习了一种新技术，即平时我们在一个页面点击“提交”或“确认”会自动跳转到一个页面。 在网上搜了一下，关于这个技术处理有多种方法，我只记下我在视频里学到的三种： 1、用一个response....
JavaScript代码模拟鼠标自动点击事件示例
主要介绍了JavaScript代码模拟鼠标自动点击事件示例，文章通过示例代码和运行效果图介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
【实战演练】MATLAB用遗传算法改进粒子群GA-PSO算法
# 2.1 遗传算法的原理和实现
遗传算法（GA）是一种受生物进化过程启发的优化算法。它通过模拟自然选择和遗传机制来搜索最优解。
**2.1.1 遗传算法的编码和解码**
编码是将问题空间中的解表示为二进制字符串或其他数据结构的过程。解码是将编码的解转换为问题空间中的实际解的过程。常见的编码方法包括二进制编码、实数编码和树形编码。
**2.1.2 遗传算法的交叉和
openstack的20种接口有哪些
以下是OpenStack的20种API接口：
1. Identity (Keystone) API
2. Compute (Nova) API
3. Networking (Neutron) API
4. Block Storage (Cinder) API
5. Object Storage (Swift) API
6. Image (Glance) API
7. Telemetry (Ceilometer) API
8. Orchestration (Heat) API
9. Database (Trove) API
10. Bare Metal (Ironic) API
11. DNS
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。