文章目录

    • 一、前言
    • 二、创意名
    • 三、效果展示
    • 四、烟花代码
    • 五、总结

一、前言

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: ${width}px; height: ${height}px;`        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    }  }

五、总结

圣诞节，玲儿响，温情祝福传递忙；喜盛宴，披红装，圣诞金娃送吉祥；夜月美，心儿醉，吉祥安康永相随；平安夜，送平安，幸福快乐人变美。最后，祝所有和我一样即将考研的人旗开得胜，坚持就是胜利，世上无难事，只要肯攀登。