插件描述：参考大神的教程实现效果后封装了一下。代码里有详细的注释并附上了教程链接。
更新时间：2018/1/22 下午11:04:03
更新说明：增加了粒子线的颜色可配。
使用很简单，就是先写个canvas元素，加个id值，再调用一下Dotline函数传些基本参数：
//调用
window.onload = function(){
var dotline = new Dotline({
dom:'J_dotLine',//画布id，必填
cw:500,//画布宽
ch:500,//画布高
ds:50,//点的个数
r:0.5,//圆点半径
dis:80//触发连线的距离
}).start();
}
PREVIOUS:
NEXT:
相关插件-动画效果
讨论这个项目（24）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
陌路 0
2018/1/28 14:49:21
请问这个如何适配手机版
cw:1000,//画布宽 ch:500,//画布高
这个尺寸如何自适应大小呢
ldwsm0
2018/1/28 15:16:50
在最低下</body>前加个
<style>
canvas{width: 100%}
</style>
陌路0
2018/1/31 20:16:09
-
我想请问下大神，这个如何适配手机版呢，在手机版上看起来这些线条都变的好大
独忆雨薇~my love 0
2018/1/11 15:17:37
-
为什么使用 cl: '#9F9F9F', //粒子线颜色这个没有成功？？？
LTxuxu0
2018/1/22 23:05:56
我记得我代码更新上传了，我再传一次吧……
丶开学典礼唱忐忑0
2020/4/2 17:19:41
-
还是更改不了线条颜色呢楼主
丶开学典礼唱忐忑0
2020/4/2 17:23:14
-
不知道怎么删除回复，不好意思楼主，代码没有浏览完，没有问题的
改变自己 0
2018/1/11 12:05:31
楼主，如何把出现的小圆点颜色不同？？？求助？
LTxuxu1
2018/1/22 23:02:59
你可以试着改下源码，就是在move那个方法里，在this.ctx.stroke()之前设置下strokeStyle。如果颜色想随机，可以再写个生成随机颜色的函数。
独忆雨薇~my love 0
2017/12/26 16:08:06
这么宽度是 满屏
LTxuxu1
2017/12/27 11:31:57
我想到的办法是通过css设置
html,body{width:100%;height:100%;},然后获取屏幕尺寸，调用的时候把尺寸传入。
var h = document.body.clientHeight,
w = document.body.clientWidth;
var dotline = new Dotline({
dom: 'J_dotLine', //画布id
cw: w, //画布宽 ch:h,//画布高
ds: 100, //点的个数
r: 0.5, //圆点半径
cl: '#9F9F9F', //粒子线颜色
dis: 100 //触发连线的距离
}).start();不知道是不是你想的效果？
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
