程序员过圣诞 | 用HTML写出绽放的烟花
Posted 亮点菌
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了程序员过圣诞 | 用HTML写出绽放的烟花相关的知识，希望对你有一定的参考价值。
文章目录
一、前言
2022年圣诞节到来啦，圣诞节是基督教纪念耶稣诞生的重要节日。亦称耶稣圣诞节、主降生节，天主教亦称耶稣圣诞瞻礼。耶稣诞生的日期，《圣经》并无记载。公元336年罗马教会开始在12月25日过此节。12月25日原是罗马帝国规定的太阳神诞辰。有人认为选择这天庆祝圣诞，是因为基督教徒认为耶稣就是正义、永恒的太阳。5世纪中叶以后，圣诞节作为重要节日，成了教会的传统，并在东西派教会中逐渐传开。因所用历法不同等原因，各教派会举行庆祝的具体日期和活动形式也有差别。圣诞节习俗传播到亚洲主要是在十九世纪中叶，日本、韩国等都受到了圣诞文化的影响。现在西方在圣诞节常互赠礼物，举行欢宴，并以圣诞老人、圣诞树等增添节日气氛，已成为普遍习俗。圣诞节也成为西方世界以及其他很多地区的公共假日。
二、创意名
圣诞节就要到了，本篇我们将用html+js写一个动态的烟花代码，程序员的浪漫这不就来了吗，感兴趣的小伙伴可下载学习，安静的在家中读懂它的那一刻，在这疫情肆虐的日子里也是一件很不错的事，将有趣的东西分享给你，希望你度过一个愉快的圣诞节！
三、效果展示
基础版动画效果，有声音
进阶版动画效果，可点击绽放烟花
四、烟花代码
动画主要由焰火类，背景图和随机函数等组成。进阶版可点击屏幕直接开始绽放烟花。
以下是HTML部分，完整代码及效果点击下载👉烟花代码
进阶版👉烟花代码2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动态烟花代码</title>
<style>
html,
*
margin: 0;
padding: 0
body
background-image: url(bg.png);
background-size: 100% 100%;
background-size: 100%;
background-repeat:no-repeat;
.demo
margin: 0 auto;
width: 100%;
height: 100%;
h1
margin: 150px auto 30px auto;
text-align: center;
font-family: 'Roboto';
</style>
</head>
<body>
<div class="demo">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="fireworks.js"></script>
<script>
$('.demo').fireworks(
sound: true,
opacity: 0.6,
width: '100%',
height: '100%'
);
</script>
</body>
</html>
js部分
// 焰火集合类
class Fireworks
_timer = null
_animater = null
_useAnimationFrame = true
ctx = null // 画布上下文，都画这上面
offScreenCtx = null // 离屏 canvas，优化性能
fps = 60 // 帧率控制
fireworks = [] // 焰火数组
fireworkCount = 8 // 焰火数量
fireworkInterval = 400 // 焰火爆炸间隔💥
fireworkColors = DEFAULT_COLORS // 焰火颜色随机取值数组
particleOptions = // 粒子配置
size: 15, // 几块钱的烟花
speed: 15, // 燃烧的速度
gravity: 0.08, // 🌍 地球的引力，向下的
power: 0.93, // 动力，值越大冲越远
shrink: 0.97, // 燃料消耗的速度
jitter: 1, // 摇摇晃摇
color: 'hsla(210, 100%, 50%, 1)', // 颜色
constructor(dom, options = )
if (!(dom instanceof HTMLElement))
options = dom ||
if (!dom)
dom = document.body
this.initCanvas(dom)
const particleOptions = , ...others = options
this.particleOptions = ...this.particleOptions, ...particleOptions
Object.keys(others).forEach(key => this[key] = others[key])
this._useAnimationFrame = this.fps >= 60
// 初始化画布
initCanvas(dom)
let canvas = dom
const isCanvas = canvas.nodeName.toLowerCase() === 'canvas'
if (!isCanvas)
canvas = document.createElement('canvas')
dom.appendChild(canvas)
const width, height = dom.getBoundingClientRect()
canvas.width = width
canvas.height = height
canvas.style.cssText = `width: $widthpx; height: $heightpx;`
this.ctx = canvas.getContext('2d')
const offScreenCanvas = canvas.cloneNode()
this.offScreenCtx = offScreenCanvas.getContext('2d')
// 创建单个焰火
createFirework(x, y, color)
const ctx, particleOptions, fireworkColors = this
const width, height = ctx.canvas
x = x ?? random(width * 0.1, width * 0.9)
y = y ?? random(height * 0.1, height * 0.9)
color = color ?? random(fireworkColors)
const particleCount = random(80, 100)
const firework = new Firework( particleOptions, particleCount, x, y, color )
this.fireworks.push(firework)
// 焰火燃尽，无情灭之
checkFireworks()
this.fireworks = this.fireworks.filter(firework => !firework.isBurnOff())
// 检查是否需要创建焰火
loop()
let interval = this.fireworkInterval * random(0.5, 1)
this._timer = setTimeout(() =>
this.checkFireworks()
if (this.fireworks.length < this.fireworkCount)
this.createFirework()
this.loop()
, interval)
// 绘制焰火
render(animationFunction, interval)
this._animater = animationFunction(() =>
const width, height = this.ctx.canvas
// 通过绘制黑色透明图层，达到尾焰的效果
this.ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'
this.ctx.fillRect(0, 0, width, height)
this.offScreenCtx.clearRect(0, 0, width, height)
this.fireworks.forEach(firework =>
firework.render(this.offScreenCtx)
)
this.ctx.save()
this.ctx.globalCompositeOperation = 'lighter'
this.ctx.drawImage(this.offScreenCtx.canvas, 0, 0, width, height)
this.ctx.restore()
this.render(animationFunction, interval)
, interval)
// 前进四 ！！！
start()
this.loop()
// 60 帧就用 requestAnimationFrame，否则用 setTimeout
const animationFunction = this._useAnimationFrame ? requestAnimationFrame : setTimeout
const interval = 16.67 * (60 / this.fps)
this.render(animationFunction, interval)
// 休息一下
pause()
this._timer && clearTimeout(this._timer)
this._animater && (this._useAnimationFrame ? cancelAnimationFrame(this._animater)
: clearTimeout(this._animater))
this._timer = null
this._animater = null
// 结束吧这个世界
stop()
this.pause()
this.fireworks.length = 0
const width, height = this.ctx.canvas()
this.ctx.clearRect(0, 0, width, height)
// 焰火类
class Firework
_status = STATUS.INIT
x = 0
y = 0
color = 'rgba(255, 255, 255, 1)'
particleCount = 80
particles = []
particleOptions =
constructor(options = )
Object.keys(options).forEach(key => this[key] = options[key])
this._status = STATUS.INIT
this.initParticles()
// 初始化粒子
initParticles()
const x, y, color, particleOptions = this
const size: baseSize = particleOptions
for (let index = 0; index < this.particleCount; index++)
const size = random(-baseSize / 2, baseSize / 2) + baseSize
const particle = new Particle( ...particleOptions, x, y, size, color )
this.particles.push(particle)
// 更新粒子
updateParticles()
this.particles.forEach(particle => particle.update())
this.particles = this.particles.filter(particle => !particle.isBurnOff())
// 拥有的粒子都燃尽了，自己也就结束了
if (this.particles.length === 0)
this._status = STATUS.COMPLETED
// 渲染粒子
render(ctx)
this.updateParticles()
if (this.isBurnOff()) return
this.particles.forEach(particle =>
particle.render(ctx)
)
isBurnOff()
return this._status === STATUS.COMPLETED
// 焰火粒子类
class Particle
size = 10
speed = 15
gravity = 0.2
power = 0.92
shrink = 0.93
jitter = 0.08
color = 'hsla(210, 100%, 50%, 1)'
shadowColor = 'hsla(210, 100%, 50%, 0.1)'
x = 0 // x 坐标位置
y = 0 // y 坐标位置
vel = // 速度
x: 0,
y: 0,
constructor(options)
Object.keys(options).forEach(key =>
this[key] = options[key]
)
const angle = random(0, Math.PI * 2)
const speed = Math.cos(random(0, Math.PI / 2)) * this.speed
this.vel =
x: Math.cos(angle) * speed,
y: Math.sin(angle) * speed,
this.shadowColor = tinycolor(this.color).setAlpha(0.1)
// 移形换位
update()
this.vel.x *= this.power
this.vel.y *= this.power
this.vel.y += this.gravity
const jitter = random(-1, 1) * this.jitter
this.x += this.vel.x + jitter
this.y += this.vel.y + jitter
this.size *= this.shrink
// 绘制单粒子
render(ctx)
if (this.isBurnOff()) return
ctx.save()
const x, y, size, color, shadowColor = this
// 红里透白，像极了爱情
const gradient = ctx.createRadialGradient(x, y, 0, x, y, size / 2)
gradient.addColorStop(0.1, 'rgba(255, 255, 255, 0.3)')
gradient.addColorStop(0.6, color)
gradient.addColorStop(1, shadowColor)
ctx.fillStyle = gradient
// ctx.beginPath()
// ctx.arc(x, y, size, 0, Math.PI * 2, true)
// ctx.closePath()
// ctx.fill()
// 绘制矩形性能更好
ctx.fillRect(x, y, size, size)
ctx.restore()
// 小到看不到
isBurnOff()
return this.size < 1
五、总结
圣诞节，玲儿响，温情祝福传递忙；喜盛宴，披红装，圣诞金娃送吉祥；夜月美，心儿醉，吉祥安康永相随；平安夜，送平安，幸福快乐人变美。最后，祝所有和我一样即将考研的人旗开得胜，坚持就是胜利，世上无难事，只要肯攀登。
以上是关于程序员过圣诞 | 用HTML写出绽放的烟花的主要内容，如果未能解决你的问题，请参考以下文章