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

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

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

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

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

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

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

jQuery数据滚动

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

css3河流时间轴效果

 不依赖任何框架，纯css3写成，简单，实用
  动画效果
 32848  333

步骤填写表单

 美观的填写表单界面
  动画效果
 46982  411

五种常用的Loading动效

 基于jquery和css的简单五种Loading样式，易用，可扩展
  动画效果
 44031  313

讨论这个项目（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
        电脑不行了
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复