连线canvas

Html

Css

 * {
	margin:0;
	padding:0;
}
#canvas {
	background-color:black;
}

var canvas = document.getElementById("canvas");
 var context = canvas.getContext("2d");
 var num = 300;
 var w = canvas.width = window.innerWidth,
     h = canvas.height = window.innerHeight;
 var range = Math.atan(-1);
 var data = [];
 for (var i = 0; i < num; i++) {
     data[i] = {
         x: Math.random() * w,
         y: h * Math.random(),
         cx: Math.random() * 3 - 1
     };
     Crice(data[i].x, data[i].y)

}
 move();

function move() {

context.clearRect(0, 0, w, h);
     for (var i = 0; i < num; i++) {
         data[i].x += data[i].cx;
         data[i].y += data[i].cx;
         if ((data[i].x > w || data[i].x < 0) || (data[i].y > h || data[i].y < 0)) {
             data[i].cx = -data[i].cx;
         }
         Crice(data[i].x, data[i].y)
         for (var j = 0; j < num; j++) {
             if ((data[i].x - data[j].x) * (data[i].x - data[j].x) + ((data[i].y - data[j].y) * (data[i].y - data[j].y)) <= 50 * 50) {
                 line(data[i].x, data[i].y, data[j].x, data[j].y);
             }
         }
     }
     window.requestAnimationFrame(move);
 }

function line(x, y, x1, y1) {
     context.save();
     context.beginPath();
     var lin = context.createLinearGradient(x, y, x1, y1);
     lin.addColorStop(0, '#66ffff');
     lin.addColorStop(1, '#990099');

context.strokeStyle = lin;
     context.moveTo(x, y);
     context.lineTo(x1, y1);
     context.fill();
     context.stroke();
     context.restore();
 }

function Crice(x, y) {
     context.save();

context.fillStyle = "red";
     context.beginPath();
     var a = Math.sin(x * Math.PI / 180) * w;
     context.translate(w / 2, h / 2 - 100);
     context.rotate(x * a);
     context.arc(x, y, 0, 0, Math.PI * 2, true);
     context.closePath();
     context.stroke();
     context.fill();
     context.restore();
 }

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

立即下载

连线canvas

代码描述：连线canvas动画

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

对酒当歌

相关代码

连线canvas

最新