插件描述：canvas小动画插件,代码注释全
更新时间：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();
PREVIOUS:
NEXT:
相关插件-动画效果
纯CSS3实现打火机火焰动画
这又是一款很酷的纯CSS3动画特效，它是一个可以点燃的打火机，当你用鼠标滑过这只打火机时，打火机就会打开，然后开始出现火焰燃烧的动画特效。另外要说明的是，整个动画都是利用纯CSS3实现的
动画效果
讨论这个项目（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
-
如何停止线的流动
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
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
-
如何修改的呀？
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
