【炫酷！在你的网页上来场烟花秀吧！】（附源码）
作者：小枭日期：2024-10-31浏览：1077分类：安卓软件
技术揭秘
在HTML5中，<canvas>元素为我们提供了一个强大的绘图平台，允许我们通过JavaScript进行绘画。烟花表演，本质上就是这种绘图技术的运用。以下是实现烟花效果的简要步骤：
初始化画布：设置画布尺寸，确保画布能够适应不同的屏幕大小。
定义烟花行为：通过编写JavaScript函数来定义烟花的运动轨迹、颜色和消失方式。
绘制烟花：使用路径（Path）和填充（fill）命令在画布上绘制圆形，模拟烟花的爆炸效果。
动画循环：通过requestAnimationFrame实现动画循环，不断地更新和重绘烟花的位置和状态。
1、创建一个 index.html 复制以下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>烟花</title>
</head>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.canvasBox {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
canvas {
border: 1px solid;
background-color: #000;
}
</style>
<body>
<div class="canvasBox">
<canvas id="canvas"></canvas>
</div>
</body>
</html>
<script src="https://www.xkwo.com/article/index.js"></script>
<script>
const canvas = document.getElementById('canvas')
const canvasWidth = document.documentElement.clientWidth || document.body.clientWidth
const canvasHeight = document.documentElement.clientHeight || document.body.clientHeight
const ratio = Math.max(window.devicePixelRatio, 2)
canvas.width = canvasWidth * ratio
canvas.height = canvasHeight * ratio
canvas.style.width = canvasWidth + 'px'
canvas.style.height = canvasHeight + 'px'
const ctx = canvas.getContext('2d')
ctx.scale(ratio, ratio)
const getRandom = (min, max) => {
return Math.random() * (max - min) + min
}
const drawCircle = ({ opacity = 1, x, y, radius, color }) => {
ctx.save()
ctx.globalAlpha = opacity
ctx.beginPath()
ctx.arc(x, y, radius, 0, Math.PI * 2)
ctx.fillStyle = color
ctx.fill()
ctx.restore()
}
const deleteFromList = (list, target) => {
const index = list.findIndex(item => {
return item === target
})
list.splice(index, 1)
}
// 动画循环
// 烟花列表
const fireworkList = []
const draw = () => {
// 使用半透明清空画布，形成拖尾效果
ctx.fillStyle = 'rgba(0,0,0,0.3)'
ctx.fillRect(0, 0, canvasWidth, canvasHeight)
ctx.save()
// 修改坐标系
ctx.translate(0, canvasHeight)
ctx.scale(1, -1)
const list = [...fireworkList]
list.forEach(firework => {
firework.update()
if (firework.isEnd()) {
deleteFromList(fireworkList, firework)
}
})
ctx.restore()
requestAnimationFrame(draw)
}
draw()
// 烟花颜色列表
const createFireworkColor = () => {
const colorList = [
'#ff0043',
'#14fc56',
'#1e7fff',
'#e60aff',
'#ffbf36',
'#ffffff'
]
return colorList[Math.floor(Math.random() * colorList.length)]
}
// 发射烟花
canvas.addEventListener('click', () => {
const firework = new Firework(
{
color: createFireworkColor()
})
fireworkList.push(firework)
firework.launch()
})
</script>
2、创建一个 index.js 复制以下代码
// 爆炸碎片类
class ExplosiveDebris {
constructor(opt) {
this.firework = opt.firework
this.x = opt.x
this.y = opt.y
this.color = Math.random() > 0.2 ? opt.color : '#fff'
this.radius = opt.radius || 2
this.angle = getRandom(0, 2 * Math.PI)
this.speed = opt.speed || getRandom(0.1, 4)
this.vx = Math.cos(this.angle) * this.speed
this.vy = Math.sin(this.angle) * this.speed
this.g = opt.g || 0.98
this.time = getRandom(0.5, 1)
this.startTime = 0
// 痕迹碎片数量
this.debrisCount = opt.debrisCount || 3
// 是否要进行二次爆炸
this.secondBurst = opt.secondBurst || false
}
start() {
this.startTime = Date.now()
}
update() {
const duration = (Date.now() - this.startTime) / 1000
const vy = this.vy - this.g * duration
this.x += this.vx
this.y += vy
const progress = duration / this.time
let opacity = progress > 0.7 ? 1 - 1 * progress : 1
if (opacity < 0) opacity = 0
drawCircle({
x: this.x,
y: this.y,
color: this.color,
radius: this.radius,
opacity: opacity
})
// 添加痕迹碎片
if (this.debrisCount > 0 && Math.random() > 0.8) {
this.debrisCount--
this.firework.addDebris({
x: this.x + getRandom(-2, 2),
y: this.y + getRandom(-2, 2),
color: this.color,
radius: 0.5,
g: 0.1
})
}
return {
x: this.x,
y: this.y,
isEnd: progress >= 1
}
}
}
// 爆炸器类
class Explosive {
constructor(opt) {
this.firework = opt.firework
this.x = opt.x
this.y = opt.y
this.color = opt.color
// 爆炸碎片列表
this.debrisList = []
// 爆炸碎片数量
this.debrisNum = opt.debrisNum || getRandom(50, 400)
// 是否要二次爆炸
this.secondBurst = opt.secondBurst || this.debrisNum <= 100
//是否是第一次爆炸
this.isFirstBurst = true
}
start(debrisNum, opt = {}) {
const num = debrisNum || this.debrisNum
opt.x = opt.x || this.x
opt.y = opt.y || this.y
opt.secondBurst = this.secondBurst && this.isFirstBurst
for (let i = 0; i < num; i++) {
const explosiveDebris = new ExplosiveDebris({
firework: this.firework,
color: this.color,
...opt
})
explosiveDebris.start()
this.debrisList.push(explosiveDebris)
}
this.isFirstBurst = false
}
update() {
const list = [...this.debrisList]
list.forEach(debris => {
const res = debris.update()
if (res.isEnd) {
deleteFromList(this.debrisList, debris)
// 二次爆炸
if (debris.secondBurst) {
this.start(5, {
x: res.x,
y: res.y,
speed: 1
})
}
}
})
return {
isEnd: list.length <= 0
}
}
}
// 痕迹碎片类
class Debris {
constructor(opt = {}) {
// 颜色
this.color = opt.color || '#fff'
// 透明度
this.opacity = getRandom(0.1, 0.5)
// 半径
this.radius = opt.radius || 1
// 存在时间
this.time = getRandom(0.5, 1)
// 重力，px/s2
this.g = opt.g || 0.98
// 位置
this.x = opt.x
this.y = opt.y
// 创建的时间
this.startTime = 0
}
start() {
this.startTime = Date.now()
}
update() {
const duration = (Date.now() - this.startTime) / 1000
this.y -= this.g * duration
drawCircle({
opacity: this.opacity,
x: this.x,
y: this.y,
radius: this.radius,
color: this.color
})
return {
x: this.x,
y: this.y,
isEnd: duration > this.time
}
}
}
// 发射器类
class Launcher {
constructor(opt = {}) {
// 烟花实例
this.firework = opt.firework
// 颜色
this.color = opt.color
// 初始位置
this.x = opt.x || canvasWidth * getRandom(0.2, 0.8)
this.y = opt.y || 0
// 目标位置
this.ty = canvasHeight * getRandom(0.6, 0.8)
// 半径
this.radius = opt.radius || getRandom(2, 5)
// 发射的持续时间
this.duration = opt.duration || getRandom(2000, 3500)
// 发射时的时间
this.startTime = 0
}
start() {
this.startTime = Date.now()
}
easeOutCubic(t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b
}
update() {
const x = this.x
let y = this.easeOutCubic(
Date.now() - this.startTime,
this.y,
this.ty - this.y,
this.duration
)
y = Math.min(y, this.ty)
// 透明度变小
let opacity = 1 - 1 * (y / this.ty)
if (opacity < 0) opacity = 0
this.draw(x, y, opacity)
// 添加痕迹碎片
if (Math.random() > 0.7 && opacity >= 0.1) {
this.firework.addDebris({
x: x + getRandom(-2, 2), // x坐标添加一段随机量
y
})
}
return {
x,
y,
isEnd: y >= this.ty //返回true代表发射结束
}
}
draw(x, y, opacity) {
// 外圆，烟花的颜色
drawCircle({
opacity: opacity,
x: x,
y: y,
radius: this.radius,
color: this.color
})
// 内圆，白色
drawCircle({
opacity: opacity,
x: x,
y: y,
radius: this.radius / 2,
color: '#fff'
})
}
}
// 烟花类
class Firework {
constructor(opt = {}) {
// 颜色
this.color = opt.color || tinycolor.random().toHexString()
// 发射器
this.launcher = null
// 爆炸器
this.explosive = null
// 烟花状态：waiting（等待发射）、launching（发射中）、bursting（爆炸中）、end（烟花结束）
this.status = 'waiting'
// 痕迹碎片列表
this.debrisList = []
}
// 发射
launch() {
this.launcher = new Launcher({
firework: this,
color: this.color
})
this.launcher.start()
this.status = 'launching'
}
// 爆炸
burst({ x, y }) {
this.explosive = new Explosive({
firework: this,
x,
y,
color: this.color
})
this.explosive.start()
}
// 更新
update() {
if (this.status === 'launching') {
const res = this.launcher.update()
if (res.isEnd) {
this.status = 'bursting'
this.burst(res)
}
} else if (this.status === 'bursting') {
const res = this.explosive.update()
if (res.isEnd) {
this.status = 'end'
}
}
// 更新痕迹碎片
this.updateDebris()
}
// 添加痕迹碎片
addDebris(opt = {}) {
const debris = new Debris({
...opt,
color: opt.color || this.color
})
debris.start()
this.debrisList.push(debris)
}
// 更新痕迹碎片
updateDebris() {
const list = [...this.debrisList]
list.forEach(debris => {
const res = debris.update()
if (res.isEnd) {
deleteFromList(this.debrisList, debris)
}
})
}
isEnd() {
return this.status === 'end'
}
}
3、给自己放个烟花秀吧
创建一个文件夹，将以上两个文件 index.html & index.js 放到创建的文件夹中
在电脑端双击打开 index.html，即可在浏览器中打开页面，点击屏幕给自己放个烟花秀吧
！！！
猜你还喜欢
- 01-03 安卓剧白白V3.2.3 纯净版
- 01-03 安卓柚子下载V1.0.5高级版
- 01-03 安卓极乐音乐v15.2.8清爽版 媲美魔音
- 01-03 安卓二驴下载v1.3.8高级版
- 01-03 安卓海阔视界v8.73 影视/资讯等多功能
- 01-03 安卓新笔趣阁纯净版 Ver.2.6.80去广告版
- 01-03 安卓全阅畅享app 海量的书籍类型能够选择
- 01-03 安卓星空影视 汇聚海量高清影视资源
- 01-03 安卓助眠减压帮手app 解锁去除广告
- 01-03 安卓飞流下载器 v1.0.5 极简磁力下载工具
- 01-03 安卓无器械健身v9.0.4绿化版
- 01-03 安卓万能工具箱app 汇集很多小功能
取消回复欢迎 你 发表评论:
- 最近发表
已有96位网友发表了看法：
游客 评论于 [2024-10-31 21:57:24] 回复
楼主今年多大了？http://7jc6.haiab.com
telegram电脑版下载 评论于 [2024-10-31 23:46:12] 回复
楼上的这是啥态度呢？https://www.telegramis.com/
skype电脑版 评论于 [2024-11-01 01:21:12] 回复
楼主的帖子实在是写得太好了。文笔流畅，修辞得体！https://www.skypeis.com/
skype电脑版登录 评论于 [2024-11-01 03:00:38] 回复
楼上的能详细介绍一下么？https://www.skypeis.com/
whatsapp官网 评论于 [2024-11-01 03:28:59] 回复
信楼主，得永生！https://www.whatsappis.com/
指尖网 评论于 [2024-11-01 16:20:53] 回复
很多天不上线，一上线就看到这么给力的帖子！http://6otg.twistforum.com
指尖站群 评论于 [2024-11-02 03:08:06] 回复
很有看点！http://zue.qishuang.top
telegram电脑版官方网站 评论于 [2024-11-02 03:32:09] 回复
看帖、回帖、拿分、走人https://www.telegramem.com/
指尖网 评论于 [2024-11-02 04:11:11] 回复
我回帖楼主给加积分吗？http://homewarrantyjz.com/html/31d98998979.html
指尖网 评论于 [2024-11-02 04:21:37] 回复
太邪乎了吧？http://ladei.cn/html/08f98999002.html
telegram官网 评论于 [2024-11-02 11:38:43] 回复
楼主的头像能辟邪啊！https://www.telegramlp.com/
skype电脑版 评论于 [2024-11-02 13:25:07] 回复
被楼主的逻辑打败了！https://www.skypeis.com/
telegram官方网站 评论于 [2024-11-02 15:04:49] 回复
很多天不上线，一上线就看到这么给力的帖子！https://www.telegramxp.com/
telegram官方网站 评论于 [2024-11-03 22:33:45] 回复
信楼主，考试不挂科！https://www.telegramxp.com/
telegram官网 评论于 [2024-11-04 16:29:15] 回复
信楼主，得永生！https://www.telegramlp.com/
游客 评论于 [2024-11-05 08:51:53] 回复
东方不败还是灭绝师太啊？http://il8w.haiab.com
skype官方网站 评论于 [2024-11-05 20:27:25] 回复
楼主练了葵花宝典吧？https://www.skypeis.com/
telegram电脑版官方 评论于 [2024-11-07 13:57:15] 回复
楼主该去看心理医生了！https://www.telegramis.com/
telegram中文版 评论于 [2024-11-08 01:09:01] 回复
今天上网不回帖，回帖就回精华帖！https://www.telegramis.com/
skype官网 评论于 [2024-11-08 08:06:22] 回复
不错的帖子，值得收藏！https://www.skypeis.com/
skype电脑版 评论于 [2024-11-09 23:16:10] 回复
楼上的这是啥态度呢？https://www.skypeis.com/
telegram官方网站 评论于 [2024-11-10 09:57:21] 回复
楼主英明！https://www.telegramxp.com/
skype电脑版 评论于 [2024-11-11 15:13:40] 回复
楼上的别说的那么悲观好吧！https://www.skypeis.com/
skype电脑版 评论于 [2024-11-13 18:56:31] 回复
回帖也有有水平的！https://www.skypeis.com/
skype电脑版 评论于 [2024-11-13 23:05:12] 回复
我默默的回帖，从不声张！https://www.skypeis.com/
游客 评论于 [2024-11-14 03:24:43] 回复
鉴定完毕！http://www.dnf8888.com
游客 评论于 [2024-11-14 03:29:32] 回复
有机会找楼主好好聊聊！http://gxji.haiab.com
游客 评论于 [2024-11-14 13:19:31] 回复
写的太好啦，评论一个https://www.guangcexing.net/vodplay/mobileemvztwgg.html
电报官网 评论于 [2024-11-15 00:47:42] 回复
白富美？高富帅？https://www.telegramip.com/
telegram电脑版官方网站 评论于 [2024-11-15 17:16:31] 回复
好东西，赞一个！https://www.telegramem.com/
电报电脑版下载 评论于 [2024-11-15 22:03:19] 回复
宇宙第一贴诞生了！https://www.telegramip.com/
电报电脑版 评论于 [2024-11-16 05:10:13] 回复
雷锋做好事不留名，都写在帖子里！https://www.telegramip.com/
Clash官方网站 评论于 [2024-11-16 18:26:01] 回复
顶一下，收藏了！https://www.linewb.com/
Clash官网 评论于 [2024-11-17 01:15:39] 回复
十分赞同楼主！https://www.linewb.com/
Clash官方网站 评论于 [2024-11-18 22:25:31] 回复
以后要跟楼主好好学习学习！https://www.linewb.com/
Clash下载 评论于 [2024-11-18 22:47:16] 回复
吹牛的人越来越多了！https://www.linewb.com/
skype官方网站 评论于 [2024-11-19 13:16:51] 回复
刚分手，心情不好！https://www.skypeis.com/
telegram官方网站 评论于 [2024-11-19 16:14:50] 回复
楼主好聪明啊！https://www.telegramck.com/
游客 评论于 [2024-11-21 00:27:53] 回复
很给力！https://www.gumua.com/play/136072.html
skype电脑版 评论于 [2024-11-25 00:52:53] 回复
回帖也有有水平的！https://www.skypeis.com/
纸飞机电脑板 评论于 [2024-11-25 22:10:20] 回复
楼主是一个神奇的青年！https://www.telegramxp.com/
telegram官方网站 评论于 [2024-11-27 21:32:01] 回复
楼上的这是啥态度呢？https://www.telegramxp.com/
游客 评论于 [2024-11-28 05:18:24] 回复
楼上的心情不错啊！https://www.dtssczx.cn/game/65875.html
telegram中文电脑版 评论于 [2024-11-28 12:52:29] 回复
十分赞同楼主！https://www.telegramem.com/
Clash下载 评论于 [2024-11-28 23:45:50] 回复
有钱、有房、有车，人人都想！https://www.clashis.com/
游客 评论于 [2024-11-29 10:40:44] 回复
刚分手，心情不好！https://m.gumua.com/use/135912.html
skype网页版 评论于 [2024-11-29 14:21:34] 回复
楼上的说的很多！https://www.skypeis.com/
telegram电脑版官方网站 评论于 [2024-12-02 04:50:31] 回复
好东西，学习学习！https://www.telegramxp.com/
Clash官网 评论于 [2024-12-03 02:32:28] 回复
很给力！https://www.clashis.com/
skype官网 评论于 [2024-12-03 22:08:11] 回复
楼主英明！https://www.skypeis.com/
telegram电脑版 评论于 [2024-12-05 03:51:50] 回复
好东西，学习学习！https://www.telegramis.com/
TG官网登录 评论于 [2024-12-06 11:39:51] 回复
世界末日我都挺过去了，看到楼主我才知道为什么上帝留我到现在！https://www.telegramxp.com/
游客 评论于 [2024-12-07 15:38:03] 回复
最近回了很多帖子，都没人理我！http://mjobzl9.wikidot.com/
Clash官网 评论于 [2024-12-08 01:27:02] 回复
很多天不上线，一上线就看到这么给力的帖子！https://www.clashis.com/
Telegram中文版下载 评论于 [2024-12-08 02:45:10] 回复
支持一个https://www.telegramzl.com/
skype网页版登陆 评论于 [2024-12-08 03:34:05] 回复
信楼主，考试不挂科！https://www.skypeis.com/
Clash下载 评论于 [2024-12-08 09:46:52] 回复
终于看完了，很不错！https://www.clashis.com/
skype电脑版 评论于 [2024-12-08 12:56:46] 回复
语言表达流畅，没有冗余，读起来很舒服。https://www.skypeis.com/
飞机中文 评论于 [2024-12-09 01:46:34] 回复
楼主主机很热情啊！https://www.telegramxp.com/
TG电脑版 评论于 [2024-12-09 14:20:24] 回复
太邪乎了吧？https://www.telegramxp.com/
telegram官网 评论于 [2024-12-10 04:25:24] 回复
写的太好啦，评论一个https://www.telegramck.com/
ClearSettle 评论于 [2024-12-10 09:58:06] 回复
精华帖的节奏啊！http://7pojo.lsqzti.cn
skype官网 评论于 [2024-12-10 18:39:46] 回复
很多天不上线，一上线就看到这么给力的帖子！https://www.skypeis.com/
telegram官网 评论于 [2024-12-11 06:57:50] 回复
很有看点！https://www.telegramis.com/
telegram电脑版 评论于 [2024-12-11 17:16:04] 回复
看帖不回帖的人就是耍流氓，我回复了！https://www.telegramck.com/
Potato电脑版下载 评论于 [2024-12-12 00:16:08] 回复
我默默的回帖，从不声张！https://www.potatb.com/
ClearSettle 评论于 [2024-12-12 02:20:49] 回复
楼主你想太多了！http://lz3.lsqzti.cn
telegram中文版 评论于 [2024-12-12 07:58:52] 回复
好无聊啊！https://www.telegramck.com/
clearsettle 评论于 [2024-12-12 23:42:04] 回复
今天是个特别的日子，值得纪念！http://d19m.lsqzti.cn
telegram官网 评论于 [2024-12-13 12:01:06] 回复
网页的加载速度非常快，不会影响用户体验。https://www.telegramck.com/
WPS下载 评论于 [2024-12-15 01:14:40] 回复
很经典，收藏了！https://www.wpswe.com/
电报中文版下载 评论于 [2024-12-15 03:44:26] 回复
今天是个特别的日子，值得纪念！https://www.telegramx.me
telegram电脑版下载 评论于 [2024-12-16 03:03:59] 回复
楼上的真不讲道理！https://www.telegramck.com/
telegram下载电脑版 评论于 [2024-12-16 06:27:43] 回复
好无聊啊！https://www.telegramis.com/
telegram下载 评论于 [2024-12-17 07:34:29] 回复
内容很有深度！https://www.telegramis.com/
telegram官网 评论于 [2024-12-17 20:03:36] 回复
我只是来赚积分的！https://www.telegramck.com/
WPS电脑版下载 评论于 [2024-12-17 22:50:48] 回复
回帖也有有水平的！https://www.wpswe.com/
telegram中文版 评论于 [2024-12-18 04:08:55] 回复
楼上的这是啥态度呢？https://www.telegramsos.com
telegram中文版 评论于 [2024-12-18 05:54:31] 回复
很经典，收藏了！https://www.telegramip.com/
WPS电脑版 评论于 [2024-12-18 12:43:35] 回复
这个帖子会火的，鉴定完毕！https://www.wpswe.com/
clearsettle 评论于 [2024-12-18 14:22:17] 回复
帖子好乱！http://1toqp.mapchat.com.cn
ClearSettle 评论于 [2024-12-19 12:30:58] 回复
写的太好啦，评论一个http://qoxb70.lsqzti.cn
电报APK下载 评论于 [2024-12-20 04:42:47] 回复
楼主英明！https://www.ch-telegram.com
clearsettle 评论于 [2024-12-20 20:27:13] 回复
楼主的帖子实在是写得太好了。文笔流畅，修辞得体！http://3rl.mapchat.com.cn
skype官网 评论于 [2024-12-20 22:13:08] 回复
每次看到楼主的帖子都有惊吓！https://www.skypeis.com/
telegram下载 评论于 [2024-12-21 01:20:45] 回复
无图无真相！https://www.telegramlp.com/
纸飞机Windows版 评论于 [2024-12-22 20:41:53] 回复
支持一下，下面的保持队形！https://t.me/s/tgwindowss
WPS下载电脑版 评论于 [2024-12-23 01:42:55] 回复
论坛的人气越来越旺了！https://www.wpswe.com/
telegram官网 评论于 [2024-12-23 03:59:00] 回复
最近回了很多帖子，都没人理我！https://www.telegramcp.com/
skype网页版 评论于 [2024-12-23 19:54:05] 回复
这个帖子会火的，鉴定完毕！https://www.skypeis.com/
电报电脑版网站 评论于 [2024-12-24 04:46:41] 回复
白富美？高富帅？https://t.me/s/tgwindowss?before=661
telegram官网 评论于 [2024-12-24 05:24:33] 回复
楼主很有激情啊！https://t.me/s/tgwindowss?before=661
skype网页版 评论于 [2024-12-24 19:35:22] 回复
楼主人气很旺！https://www.skypeis.com/
skype官网 评论于 [2024-12-25 01:39:03] 回复
太邪乎了吧？https://www.skypeis.com/
爱思助手下载 评论于 [2024-12-26 09:29:34] 回复
大神就是大神，这么经典！https://i4-pc.com
LINE网页版登录 评论于 [2024-12-26 21:59:40] 回复
知识就是力量啊！https://www.linewb.com/