UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

可自定义形状文字的烟花(原创)

所属分类：其他-动画效果

 60767  448  查看评论 (31)
分享到微信朋友圈
X
可自定义形状文字的烟花(原创) ie兼容11
 查看演示  立即下载

发布时间：2018-7-12 1:10

canvas仿烟花效果,预设了圆形,椭圆形,桃心形,一箭穿心形和自定义形状烟花,代码注释全,自定义程度高.

相关插件-动画效果
查看更多

three.js 创建 多面立方体

 基于three.js 创建6面立方体模型 可旋转添加动画
  动画效果
 29727  315

jQuery数据滚动

 当页页滚动到一定位置时，数值自动增加动态效果
  动画效果
 49473  505

背景彩带动画插件ribbon.js

 只有1kb的javascript 可以使用 HTML5 画布在您的网站上生成背景彩带动画
  动画效果
 41260  413

水滴特效插件弹力实足

 jquery加html5实现水滴特效插件
  动画效果
 40151  409

讨论这个项目（31）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    曾?丿?咿 0
    2019/1/31 13:58:00
    背景能换成一张图片吗？需要把烟花效果放在图片上。
        Charon0
        2020/6/16 9:38:51
        给body添加属性：body{backgroug-image:url("123.ipg");}
        JavaScript0
        2023/1/23 21:25:50
        厉害厉害
    回复
    螭吻 0
    2019/1/25 11:26:00
    全屏之后canvas画布没有随屏幕大小变化而变化，如何解决？求解各位大神
        西瓜3
        2019/1/25 11:41:13

        修改方法
        先Css样式增加

        <style>
    *{padding: 0px;margin: 0px;}
    body,html{overflow: hidden;width: 100%;height: 100%}
    canvas{width: 100%;height: 100%}
</style>

        修改html中

        <canvas id="canvas" width="500" height="500"></canvas>

        当前宽高写死，改成

        <canvas id="canvas"></canvas>

        宽高由样式控制全屏
        修改js代码

        canvas.width = $(window).width() - 15;
canvas.height = $(window).height() - 20;

        改为以下，

        canvas.width = $(window).width() ;
canvas.height = $(window).height();

        个人认为这样更合理，方便加入到任意容器内。

        螭吻0
        2019/1/25 13:54:50
        但是这样的话，canvas里面的内容全屏后就失真了，烟花被拉长了
        西瓜0
        2019/1/25 14:17:54

        代码写法会以当前打开的网页宽和高生成烟花，只有你调整了浏览器大小才会失真，这确实是个问题，但是这样操作的用户并不多。

        螭吻0
        2019/1/25 14:21:40
        好的，感谢大神指点！
    回复
    天 0
    2018/11/26 12:26:39
    博主大佬你好，我下载了之后发现字改不了。请问怎么生成自定义的汉字呢。好像得改Firework中word_matrix数组
        wjf199402110
        2018/11/26 20:26:54
        可以改,那个是坐标,自己画个坐标图就可以改,但在坐标系里面,字是反+倒的,你试试就知道
        天0
        2018/11/26 20:38:13
        看出来了，有没有更好点的办法哟
    回复
    wjf19940211 0
    2018/11/25 21:44:15
    字怎么改啊
        天0
        2018/11/26 12:31:04
        同样求助，好像得生成一个汉字数组
    回复
    美凌格 0
    2018/8/14 11:09:39
    怎么改文字
        ＊＊＊0
        2018/9/10 20:19:45
        Firework.js文件里面有字，把字改了试试能不能行
    回复
    wzc543 0
    2018/8/14 9:13:18
    后面的那些生日快乐 字 怎么换掉呢 回复
    chiwanchao521 0
    2018/8/8 17:25:26
    怎么获取jq币
        ◇◆格子、??的夏天0
        2018/8/11 10:12:43
        每天签到就可以获取
        ☆★☆0
        2018/8/25 14:58:49
        怎么获取jq币
        ?秣的木乃伊0
        2018/10/23 17:19:16
        签到3天以上
        千柒i0
        2022/7/25 21:17:36
        生成的字文字吗z
    回复
    潇潇 0
    2018/7/26 11:34:12
    烟花也是超出屏幕，看不完整烟花 回复
    潇潇 0
    2018/7/26 11:31:41
    这个烟花的文字都几乎超出屏幕了，字体看不完整，怎么可以才能完整的看到烟花文字呢？求解决
        我有2个橙子??0
        2018/9/29 16:45:48
        改变html里面js代码60行的地方，改变爆炸时间，我14寸笔记本设置40-50帧的效果最好。
        螭吻0
        2019/1/21 18:02:40
        请问是这个吗？“beforeBalst.setLife(50 + Math.floor(Math.random() * 50));//烟花从发射到爆炸的时间,单位为帧,即50-100帧后爆炸”
        这样改可以吗？“beforeBalst.setLife(40 + Math.floor(Math.random() * 10));”
    回复
    明月半倚深秋 0
    2018/7/13 8:48:18
    很卡CPU直线上升。。。
        BattleofLexington0
        2018/7/13 9:00:53
        没感觉，你该升级电脑了。
        明月半倚深秋0
        2018/7/14 8:40:23
        难道大家都是16G的内存？
        潇潇0
        2018/7/26 11:39:41
        用谷歌浏览器挺好的
        小帅0
        2021/3/13 0:13:57
        电脑不行了
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复