用HTML5 Canvas实现点击烟花绽放效果
发布时间
阅读量：
阅读量
用HTML5 Canvas实现点击烟花效果
前言
今天是我向大家展示如何利用HTML5 Canvas实现一个简单的烟花效果的日子。当你在屏幕上点击时，在你点击的位置上绽放出美丽的烟花。这个效果是基于Canvas绘图能力和粒子动画原理开发出来的。
功能特点
- 通过触碰屏幕的任意位置即可引发绚丽烟花效果。
- 动态效果显示中，在画面中会出现多个独立元素，在每一个元素内部都运行着独特的运动模式。
- 色彩随机生成的效果赋予每个元素独特的色彩呈现。
- 基于真实的物理规律运行，在视觉效果上能够呈现出更为精确的抛物线形态。
效果展示
鼠标点击烟花绽放效果
实现代码解析
HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>鼠标点击烟花绽放</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #000;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="fireworksCanvas"></canvas>
<script>
// JavaScript代码
</script>
</body>
</html>解析 ：
- 该HTML架构极为整洁，仅包含一个
<canvas>元素专门用于生成烟花效果。- 采用内置的内联CSS样式表配置页面背景颜色为黑色，并成功隐藏滚动条内容。
JavaScript代码
const canvas = document.getElementById("fireworksCanvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
function random(min, max) {
return Math.random() * (max - min) + min;
}
class Particle {
constructor(x, y) {
this.x = x;
this.y = y;
this.color = `rgb(${Math.floor(random(0, 255))},${Math.floor(random(0, 255))},${Math.floor(random(0, 255))})`;
this.radius = random(1, 3);
this.vx = random(-3, 3);
this.vy = random(-5, -1);
this.gravity = 0.1;
this.alpha = 1;
}
update() {
this.x += this.vx;
this.y += this.vy;
this.vy += this.gravity;
this.alpha -= 0.01;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.globalAlpha = this.alpha;
ctx.fill();
ctx.globalAlpha = 1;
}
}
const fireworks = [];
canvas.addEventListener("click", (event) => {
const x = event.clientX;
const y = event.clientY;
const numberOfParticles = 100;
for (let i = 0; i < numberOfParticles; i++) {
const particle = new Particle(x, y);
fireworks.push(particle);
}
});
function animate() {
requestAnimationFrame(animate);
ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (let i = fireworks.length - 1; i >= 0; i--) {
fireworks[i].update();
fireworks[i].draw();
if (fireworks[i].alpha <= 0.01) {
fireworks.splice(i, 1);
}
}
}
animate();解析 ：
初始化Canvas
const canvas = document.getElementById("fireworksCanvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;-
获取Canvas元素及其绘图上下文。
- 设置Canvas大小为窗口大小。
随机数函数
function random(min, max) {
return Math.random() * (max - min) + min;
}-
生成指定范围内的随机数，用于粒子属性的随机化。
Particle类 *
构造函数 ：
constructor(x, y) {
this.x = x;
this.y = y;
this.color = `rgb(${Math.floor(random(0, 255))},${Math.floor(random(0, 255))},${Math.floor(random(0, 255))})`;
this.radius = random(1, 3);
this.vx = random(-3, 3);
this.vy = random(-5, -1);
this.gravity = 0.1;
this.alpha = 1;
}- 初始化粒子的位置、颜色、半径、速度、重力和透明度。
更新方法 ：
update() {
this.x += this.vx;
this.y += this.vy;
this.vy += this.gravity;
this.alpha -= 0.01;
}- 更新粒子的位置和透明度。
* 模拟重力效果。
绘制方法 ：
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.globalAlpha = this.alpha;
ctx.fill();
ctx.globalAlpha = 1;
}-
绘制粒子圆形图形。
* 使用全局透明度控制粒子渐隐效果。
点击事件监听
canvas.addEventListener("click", (event) => {
const x = event.clientX;
const y = event.clientY;
const numberOfParticles = 100;
for (let i = 0; i < numberOfParticles; i++) {
const particle = new Particle(x, y);
fireworks.push(particle);
}
});-
监听鼠标点击事件。
- 在点击位置创建多个粒子。
动画循环
function animate() {
requestAnimationFrame(animate);
ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (let i = fireworks.length - 1; i >= 0; i--) {
fireworks[i].update();
fireworks[i].draw();
if (fireworks[i].alpha <= 0.01) {
fireworks.splice(i, 1);
}
}
}- 通过调用
requestAnimationFrame函数来实现动画的流畅显示。 - 在每一帧渲染时，绘制一个带有半透明黑色背景的矩形块。
- 动态更新并重新绘制所有粒子，并对那些透明度低于预设阈值的粒子予以删除。
使用说明
用于将源代码导出为.html文件。
打开该文件后，在主流浏览器平台中即可查看内容。
快速点击屏幕操作即可呈现烟花视觉效果。
总结
在本次过程中达成目标后，在应用HTML5 Canvas技术的过程中生成了一个简单的烟花效果。这一成果的关键在于粒子系统的重要性及其应用价值——每个粒子都具备独立的运动轨迹和生命周期，并且可以通过调整相关参数以进一步优化整体视觉效果：
- 粒子总数（total particles）
- 随机分布在-5到-1之间的粒子速度范围
- 随机分布在1到3之间的粒子大小范围
- 重力加速度设置为0.1
- 渐隐速度每次迭代减少0.01
这篇作品或许能为你带来启发！如果你觉得有趣的话，请考虑加入更多效果,如声音效果或不同形状的烟花
全部评论 (0)
还没有任何评论哟~