春节“制作”自己的烟花

liuzhen007 发表于 2022/02/14 22:32:25 2022/02/14
【摘要】 前言不知不知觉中,春节已经快过完了,年假已经余量不足。因为疫情的反复,自己响应政府号召就地过年,因此留在了“帝都”北京过节。在帝都过节不方便的地方有很多,比如放烟花就不是很自由。于是,自己搞点事情,满足一下自己放烟花的心情。 正文 呈现方式尽然已经决定做个烟花程序了,那么选择哪种呈现方式呢?比如小程序、Android、iOS、网页、windows 客户端、mac 客户端、linux 客户端...

前言

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

正文

呈现方式

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

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

选一张特别的背景图

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

image.png

接下来,设置背景图,注意设置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 图,貌似也没有影响烟花的绽放效果。敬请欣赏,如下图所示:

yanhua.gif

总结

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


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

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。