canvas粒子连线

Html

Css

 body {
	background-color:#005CBA;
	margin:0;
	overflow:hidden;
}
#canvas {
	display:block;
}

var total = 100;
 var size = 5; //半径
 var x;
 var y;
 var arr = []; //点路径
 var oldPoint;
 var PI = Math.PI;
 var canvas = document.getElementById('canvas');
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 var ctx = canvas.getContext("2d");
 ctx.strokeStyle = 'rgba(255,255,255,1)';
 ctx.fillStyle = 'rgba(255,255,255,.5)';
 ctx.lineWidth = 1;
 var opa = 0;
 vy = 25;
 vx = 0;
 gravity = 0.005;

function drawPoint() {
     $.each(arr, function(i, m) {
         ctx.beginPath();
         ctx.arc(m.x, m.y, size, 0, 2 * PI);
         ctx.fill();
         ctx.save();
     })
 }

//  偏移
     $.each(firsrArr, function(i, m) {
         m.x += 0.5;
     })
     $.each(firsrArr, function(i, m) {
         m.y -= 0.3;
     })
     $.each(secondArr, function(i, m) {
         m.y -= 0.25;
     })
     $.each(secondArr, function(i, m) {
         m.x += 0.25;
     })
     $.each(thirdArr, function(i, m) {
         m.x += 0.7;
     })
     $.each(thirdArr, function(i, m) {
         m.y -= 0.1;
     })
     $.each(fourArr, function(i, m) {
         m.y += 0.3;
     })
     $.each(fourArr, function(i, m) {
         m.x -= 0.2;
     })
     drawPoint();
     drawLine();
     window.requestAnimationFrame(loop);
 }
 window.requestAnimationFrame(loop);

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

立即下载

canvas粒子连线



代码描述：canvas粒子运动背景图

此效果是通过canvas粒子运动，来达到连线的效果

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

流年里的时光ZY

相关代码

canvas粒子连线

最新