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

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

 34664  333  查看评论 (28)
分享到微信朋友圈
X
可自定义形状文字的烟花(原创) ie兼容11

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

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

相关插件-动画效果

CSS3按钮发光动画 绚丽多彩

CSS3按钮发光动画 绚丽多彩
  动画效果
 38073  340

jQuery+HTML5相应式文字粒子动画

jQuery+HTML5相应式文字粒子动画,使用canvas的。请在服务器环境下运行。
  动画效果
 41857  586

弹框消失效果

弹框消失的各种效果,应该会有你需要的。
  动画效果
 20021  258

css3实现鲨鱼游动(酷)

css3实现鲨鱼游动,效果非常酷哦。
  动画效果
 30825  337

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

    曾?丿?咿 0
    2019/1/31 13:58:00
    背景能换成一张图片吗?需要把烟花效果放在图片上。
        Charon0
        2020/6/16 9:38:51
        给body添加属性:body{backgroug-image:url("123.ipg");}
    回复
    螭吻 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天以上
    回复
    潇潇 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
        用谷歌浏览器挺好的
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复