canvas管道流动动画

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

 40804  332  查看评论 (38)
分享到微信朋友圈
X
canvas管道流动动画 ie兼容9

更新时间:2019/2/21 下午5:52:45

更新说明:更改了Createline构造函数的结构,调用方式也做出了相应的更改。


建立一个canvas标签,然后调用插件就能使用,基本上都有注释,入门级代码,给大家分享下。。

demo我只用到了插件里的由左到右的横向流动,其实由上而下的流动插件里也有,但是用一个就可以了,毕竟可以通过旋转canvas标签达到各种效果。

var data = {
    time: 100, //运动速度
    mx: 0, //起点位置
    my: 6,
    ly: 6,
    canvas_w: 280,
    canvas_h: 10,
    color: "#484a18", //颜色
    vx: 4,
    vy: 0,
    line_w: 4,
    fx: "w",
    width: 20, //线长
    jiange: 8, //间隔
};
var res = new Createline("right", data);
res.begin();
相关插件-动画效果

CSS3实现色彩喷泉

CSS3实现色彩喷泉
  动画效果
 39368  437

炫酷css3登录界面

带CSS3动画特效的时尚登录界面UI设计
  动画效果
 91231  734

html5制作雪花效果

html5制作雪花效果
  动画效果
 40552  371

JS和CSS实现的文字特效

JS和CSS实现的文字特效,IE6及以上都支持
  动画效果
 55236  462

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

    小屁孩儿 0
    2022/5/5 9:29:25
    楼主 怎么用一个开关控制线的停还是动啊 我弄出来单独停下来的 但是用一个开关弄就不会了 我是vue3+ts引入的
        aacx0
        2022/8/29 15:49:23
        你的好几个问题都是我想问的,能发一份代码给我嘛?真的万分感谢了!2224559739@qq.com
    回复
    小屁孩儿 0
    2022/4/27 13:01:45
    我也想问 怎么控制线的停和运转呢
        小屁孩儿0
        2022/4/29 13:22:32
        我知道怎么改了 clearInterval 使用这个就停止了 如果有不懂的 我告诉你 嘿嘿
    回复
    生活,一半记忆.一半继续 0
    2022/3/2 14:05:06
    请问如何去掉线的流动,或者按钮可以控制线的流动与停止?谢谢
        小屁孩儿0
        2022/4/29 13:22:45
        我知道怎么改了 clearInterval 使用这个就停止了 如果有不懂的 我告诉你 嘿嘿
    回复
    - 0
    2020/6/29 15:17:46
    怎么从右往左流动
        多余的笨蛋1
        2020/12/2 9:28:03
        你在canvas上面加上class="rotate180"流动方向就变了
        包子0
        2022/4/13 9:25:08
        我下载后的代码好像不全
        包子0
        2022/4/13 17:11:54
        如何停止线的流动
    回复
    萌比,追我! 0
    2020/5/29 11:47:13
    楼主有联系方式么 回复
    6℃ 0
    2020/5/8 9:53:01
    楼主,虚线怎么设置一样长
        6℃0
        2020/5/8 10:22:49
        已经改了
        小屁孩儿0
        2022/4/29 9:06:39
        怎么设置一样长的啊
        小屁孩儿0
        2022/4/29 9:13:57
        已经改好了👏
        aacx0
        2022/8/29 15:48:28
        怎么改的呀?
    回复
    悠然 0
    2020/1/2 14:15:00
    怎么联系你?如果你看到,可以加我QQ,474478529@qq.com 回复
    〃Jack 0
    2019/10/22 20:58:39
    不错,正好可以学习下,希望楼主可以发个联动的,谢谢,602014885@qq.com 回复
    孺劫不复者 0
    2019/8/11 16:51:34
    参数fx配置成“h”没有效果
        孺劫不复者0
        2019/8/11 17:10:24
        还有就是为什么虚线是一节长一节短呢 不是均匀的虚线
        6℃0
        2020/5/8 9:44:13
        你的虚线问题解决了么
        6℃0
        2020/5/8 10:23:00
        已经改好了
        多余的笨蛋1
        2020/12/2 9:31:16

        fx设置h之后他的代码有问题报错了,你需要修改下,

        Createline.prototype.updateline_h

        中是

        self.lines;if (canvas.fx == 'h') {}

        中是self.c,你和上面的代码对比下修改就可以了

        小屁孩儿0
        2022/4/29 9:05:28
        设置成h没效果 是把这个Createline.prototype.updateline_h里面的self.lines全部改成self.c吗 还是怎么改呢
        aacx0
        2022/8/29 15:50:08
        如何修改的呀?
    回复
    意外 i 0
    2019/5/9 13:56:57
    需要一份, 好心人可以给一份吗? 942703526@qq.com 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复