烟花字在线生成,可自定义形状文字的烟花(原创)

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

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

 37617  370  查看评论 (28) 分享到微信朋友圈X  查看演示  website  立即下载插件描述：canvas仿烟花效果,代码注释全

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

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

PREVIOUS:NEXT: jQuery唯美图片Y轴展示 基于echarts后台统计图首页 相关插件-动画效果 查看更多 文字插件特效_文字动画特效js插件此插件是针对文字写的一个动画插件，主要可运用在开场和出场的时候，插件方便小巧，只需要配置参数即可达到数十种动画效果 动画效果 46182  768css3实现鲨鱼游动（酷）css3实现鲨鱼游动，效果非常酷哦。 动画效果 31839  368新年快乐粒子烟花根据其他插件改编拜年烟花效果 动画效果 31726  375html5 水波扩散效果HTML5实现点击水波扩散效果 动画效果 37826  434讨论这个项目（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样式增加

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

修改html中

当前宽高写死，改成

宽高由样式控制全屏修改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:45Firework.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用谷歌浏览器挺好的回复 查看更多评论 登录后才可以评论 30秒后在评论吧!😃😀😉😥😵😫😘😡👍🌹👏🍺🍉🌙⭐💖💔 😃😀😉😥😵😫😘😡👍🌹👏🍺🍉🌙⭐💖💔取消回复