「兔了个兔」——新春烟花

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

开篇

从一开始我就想做这个烟花的效果了，因为，我所在的省份近4、5年禁止燃放烟花爆竹，今年连隔壁省都解放了，我们还禁止燃放。于是乎，电子烟花就成了替代品。

首先，依然是放一下效果图。

附上码上掘金的调试源码：

下面开始实现它

思路

首先是布局了，然而这个并不需要什么布局，H1居中，画布全屏就欧克。之后给2023的3设置一个动画，让他一开始出场的时候有一个掉落的动画，单纯设置Y轴就好了。最重要的是JS部分。首先，在js中先获取标签，设置画布大小，采用resize监听页面的调整，及时的改变画布的大小。然后，产生烟花的初级形态，添加一个烟花雏形。之后，更新画布让它的半径不断的增大即可，实现散开的效果。接着，在绘制完一帧后，绘制下一帧之前，添加一个半透明的蒙层就能实现一个拖尾的效果。然后用hsla做随机颜色。最后，通过重新调整烟花路径，来实现烟花的下坠和消失，当透明度为0的时候就把该烟花在队列中移除，通过定时器动态创建烟花。

实现过程

HTML

没啥好说的，就算一个画布。

    <canvas></canvas>
    <h1>202<span class="pen">3</span> 新年快乐</h1>

CSS

这里布局的话很简单，说一下动画。动画就分阶段实现在Y轴上的平移。

@keyframes drop {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }
    90% {
        opacity: 1;
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0px);
    }
}

JS

实现的过程的时候，为了图个方便，我直接写死了几个颜色，然后设置个随机值返回这几个颜色之一，没用使用hsla实现。

下面放出来的是烟花函数和爆炸函数。

function Firework(x, y) {
   this.xmove = new Walker({radius: 10, speed: 0.5})
   this.x = x || Math.random() * ctx.canvas.width
   this.y = y || ctx.canvas.height
   this.height = Math.random()*ctx.canvas.height/2
   this.dead = false
   this.color = randomColor()
   this.move = function() {
      this.x += this.xmove.step()
      if(this.y > this.height) this.y -= 1; 
      else this.burst()
   }
   this.draw = function() {
      drawCircle(this.x, this.y, 1, this.color)
   }
   this.burst = function() {
      this.dead = true
      var i = 100; while(i--) sparks.push(new Spark(this.x, this.y, this.color))
   }
}
function Spark(x, y, color) {
   this.x = x
   this.y = y
   this.dir = Math.random() * (Math.PI*2)
   this.dead = false
   this.color = color
   this.speed = Math.random() * 3 + 3;
   this.walker = new Walker({ radius: 20, speed: 0.25 })
   this.gravity = 0.25
   this.dur = this.speed / 0.1
   this.move = function() {
      this.dur--
      if(this.dur < 0) this.dead = true
      if(this.speed < 0) return
      if(this.speed > 0) this.speed -= 0.1
      var walk = this.walker.step()
      this.x += Math.cos(this.dir + walk) * this.speed
      this.y += Math.sin(this.dir + walk) * this.speed
      this.y += this.gravity
      this.gravity += 0.05
   }
   this.draw = function() {
      drawCircle(this.x, this.y, 3, this.color)
   }
}

到此，新春烟花就基本完成了。

我也同步在码上掘金上发布了这个代码，喜欢的话可以去看看。 兔了个兔（十） - 码上掘金 (juejin.cn)

最后，一个小请求，麻烦各位看官动动手指点个赞吧！！！