canvas实现粒子线条效果

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

 12311  101  查看评论 (17)
canvas实现粒子线条效果 ie兼容9

更新时间: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();
}
相关插件-动画效果

jQuery简单的真心话大冒险游戏文字随机抽取大冒险

jquery简单的真心话大冒险游戏文字随机抽取大冒险
  动画效果
 18010  140

CSS3模仿四季交替动画

HTML5 CSS3卡通风格一年四季交替动画特效
  动画效果
 5427  48

css实现任务奔跑

利用backgroundposition,实现人物跑步的动画 ,并且支持快慢,暂停等
  动画效果
 11989  123

炫酷css3登录界面

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

讨论这个项目(17)回答他人问题或分享插件使用方法奖励jQ币

    2 0
    2018/3/22 15:45:18
    背景图片是怎么设置的。
    回复
    往事胗锾 0
    2018/1/30 17:38:14
    特地来感谢一下 纯js看得很爽,也没有用插件  很值得学习
        LTxuxu0
        2018/1/31 9:00:53

        一起进步哈

    回复
    陌路 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
        我想请问下大神,这个如何适配手机版呢,在手机版上看起来这些线条都变的好大
    回复
    Wen。 0
    2018/1/22 18:18:52
    怎么改变着线条的颜色呢 回复
    独忆雨薇~my love 0
    2018/1/11 15:17:37
    为什么使用  cl: '#9F9F9F', //粒子线颜色这个没有成功???
        LTxuxu0
        2018/1/22 23:05:56

        我记得我代码更新上传了,我再传一次吧……

    回复
    改变自己 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();

        不知道是不是你想的效果?

    回复
    悟乙己 0
    2017/12/7 16:53:38

    Think you 拿着去学下

    回复
    RosiWang 0
    2017/11/24 17:43:26
    Rob 0
    2017/11/1 10:23:54
取消回复