春节“制作”自己的烟花

前言

不知不知觉中，春节已经快过完了，年假已经余量不足。因为疫情的反复，自己响应政府号召就地过年，因此留在了“帝都”北京过节。在帝都过节不方便的地方有很多，比如放烟花就不是很自由。于是，自己搞点事情，满足一下自己放烟花的心情。

正文

呈现方式

尽然已经决定做个烟花程序了，那么选择哪种呈现方式呢？比如小程序、Android、iOS、网页、windows 客户端、mac 客户端、linux 客户端？

来个自己最上手的 PC 客户端吧，而且是支持 windows、mac、linux 三大平台。毫无疑问，使用 Electron 架构性价比最高。Electron 是一个开源的跨平台 PC 架构方案。

选一张特别的背景图

自己是一个喜欢分享和乐于助人的输出型博主，在友盟的开发者社区帮助了很多小伙伴，因此也得到官方的认可，获得季度之星的荣誉称号，而且官方还送出了荣誉证书和定制礼盒，自己就用他们作为烟花的背景图吧。

接下来，设置背景图，注意设置canvas背景图时，需要等图片加载完成才能绘制。

首先，获取canvas对象的上下文，代码如下：

var ctx = canvas.getContext("2d");

然后，创建背景图对象和监听事件，代码如下：

var img = new Image();
img.src = "img/bg.png";
img.onload = function () {
        draw();
}

最后，定义绘制方法，把图片绘制到canvas中，代码如下：

function draw() {
        ctx.drawImage(img, 0, 0, img.width, img.height);
}

定义烟花

定义绽放烟花的基础属性，包括烟花的x轴和y轴的坐标、烟花半径、发射速度、绽放范围等，参考代码如下：

function Fire() {
    this.x = canvas.width / 2, //烟花的x坐标
    this.y = canvas.height, //烟花的y坐标
    this.radius = 2, //烟花的半径
    this.speed = getRandom(6, 8), //发射的速度
    this.angle = getRandom(1.1 * Math.PI, 1.9 * Math.PI), //绽放的范围
    this.color = Math.random() > 0.5 ? 'white' : ('#' + Math.random().toString(16).substr(2, 6).toUpperCase());
}

定义烟花的绽放碎片

我们都知道，烟花绽放后，会产生无数的碎片，这些碎片的样子才最终决定烟花的美丽程度，因此设计时非常重要，烟花碎片包括坐标、半径、碎片次数、速度、重力、摩擦力、角度等，参考代码如下：

function ChildFire() {
    this.x = 0, //烟花碎片x位置
    this.y = 0, //烟花碎片y位置
    this.radius = 1, //烟花碎片半径
    this.n = 2, //烟花碎片次数
    this.speed = getRandom(1, 10) / 5, //烟花碎片速度
    this.g = 0.98, //重力
    this.mocha = 0.96, //摩擦力
    this.color = Math.random() > 0.5 ? 'white' : ('#' + Math.random().toString(16).substr(2, 6).toUpperCase()), //碎片的角度
    this.angle = getRandom(0, 2 * Math.PI); //0-2π之间随机
}

最终效果图

因为掘金不能上传视频，我把视频做成了 gif 图，貌似也没有影响烟花的绽放效果。敬请欣赏，如下图所示：

总结

好啦，自己想要的烟花效果就算实现啦。正文的动图效果，还算可以吧。感兴趣的小伙伴欢迎评论留言，沟通交流，让烟花绽放的更美。

作者简介：😄大家好，我是 Data-Mining（liuzhen007），是一位典型的音视频技术爱好者，前后就职于传统广电巨头和音视频互联网公司，具有丰富的音视频直播和点播相关经验，对 WebRTC、FFmpeg 和 Electron 有非常深入的了解，😄公众号：玩转音视频。同时也是 CSDN 博客专家、华为云享专家（共创编辑）、InfoQ 签约作者，欢迎关注我分享更多干货！😄