canvas实现粒子线条效果

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

 6730  67  查看评论 (9)
canvas实现粒子线条效果 ie兼容9

使用很简单,就是先写个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();
}
相关插件-动画效果

bezie curve 曲线动画

bezie curve 曲线动画
  动画效果
 8957  104

html5 canvas粒子星空

html5 canvas鼠标跟随粒子星空动画
  动画效果
 9873  126

jQuery飘落的枫叶

枫叶一片一片又一片,此时最相思,代码简单方便调用
  动画效果
 6176  38

jQuery浮层跟随图片动画代码

jQuery浮层跟随图片动画代码
  动画效果
 10479  81

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

    Wen。 0
    2018/1/22 18:18:52
    怎么改变着线条的颜色呢 回复
    独忆雨薇~my love 0
    2018/1/11 15:17:37
    为什么使用  cl: '#9F9F9F', //粒子线颜色这个没有成功??? 回复
    改变自己 0
    2018/1/11 12:05:31

    楼主,如何把出现的小圆点颜色不同???求助?

    回复
    独忆雨薇~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
    Mr易玉龙 0
    2017/10/30 17:08:12
取消回复