canvas粒子

Html

Css

html {
	width:100%;
	height:100%;
}
body {
	height:100%;
	width:100%;
}
* {
	margin:0;
	padding:0;
}

function loopCircle() {
    ctx.fillStyle = "rgba(0,0,0,0.6)"
    ctx.fillRect(0, 0, width, height);

for (let i = 0; i < list.length; i++) {
        for (let j = 0; j < list.length; j++) {
            let lx = list[j].x - list[i].x;
            let ly = list[j].y - list[i].y;
            let LL = Math.sqrt(Math.pow(lx, 2) + Math.pow(ly, 2));

//比对：当距离满足时，绘制线条，以rgba实现过渡
            if (LL <= 180) {
                ctx.beginPath();
                ctx.strokeStyle = `${list[i].lineColor},${(180-LL)/180})`;

ctx.moveTo(list[i].x, list[i].y);
                ctx.lineWidth = 1;
                ctx.lineTo(list[j].x, list[j].y);
                ctx.stroke()
            }
        }
        list[i].draw();
        list[i].update();
    }
    requestAnimationFrame(loopCircle);
}
loopCircle()

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas粒子



代码描述：这是我的第二个版本，第一个配色有点查

这个效果是基于canvas实现，小球及连线颜色和运动速度，可以自己改，

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

→_→

相关代码

canvas粒子

最新