知乎登錄頁背景，動態的網格是怎麼做出來的？

01-05

是JS腳本么？還是背景圖片

我也覺得這個很有意思，於是花了兩三個小時自己整了一個，看著還挺像；

貼上代碼（比較粗糙）：

& & & & &canvas& &body{text-align: center;background: #F7FAFC;overflow: hidden;background: #fff;}#canvas{display: inline-block;}& & & &


		var canvas = document.getElementById("canvas");

		canvas.width = WIDTH,

		canvas.height = HEIGHT;

		var context = canvas.getContext("2d");

		context.strokeStyle = "rgba(0,0,0,0.02)",

		context.strokeWidth = 1,

		context.fillStyle = "rgba(0,0,0,0.05)";

		var circleArr = [];
		//線條：開始xy坐標，結束xy坐標，線條透明度

		function Line (x, y, _x, _y, o) {

			this.beginX = x,

			this.beginY = y,

			this.closeX = _x,

			this.closeY = _y,

			this.o = o;

		}

		//點：圓心xy坐標，半徑，每幀移動xy的距離

		function Circle (x, y, r, moveX, moveY) {

			this.x = x,

			this.y = y,

			this.r = r,

			this.moveX = moveX,

			this.moveY = moveY;

		}

		//生成max和min之間的隨機數

		function num (max, _min) {

			var min = arguments[1] || 0;

			return Math.floor(Math.random()*(max-min+1)+min);

		}

		// 繪製原點

		function drawCricle (cxt, x, y, r, moveX, moveY) {

			var circle = new Circle(x, y, r, moveX, moveY)

			cxt.beginPath()

			cxt.arc(circle.x, circle.y, circle.r, 0, 2*Math.PI)

			cxt.closePath()

			cxt.fill();

			return circle;

		}

		//繪製線條

		function drawLine (cxt, x, y, _x, _y, o) {

			var line = new Line(x, y, _x, _y, o)

			cxt.beginPath()

			cxt.strokeStyle = "rgba(0,0,0,"+ o +")"

			cxt.moveTo(line.beginX, line.beginY)

			cxt.lineTo(line.closeX, line.closeY)

			cxt.closePath()

			cxt.stroke();
		}

		//初始化生成原點

		function init () {

			circleArr = [];

			for (var i = 0; i &< POINT; i++) {
				circleArr.push(drawCricle(context, num(WIDTH), num(HEIGHT), num(15, 2), num(10, -10)/40, num(10, -10)/40));
			}
			draw();
		}

		//每幀繪製
		function draw () {
			context.clearRect(0,0,canvas.width, canvas.height);
			for (var i = 0; i &< POINT; i++) {
				drawCricle(context, circleArr[i].x, circleArr[i].y, circleArr[i].r);
			}
			for (var i = 0; i &< POINT; i++) {
				for (var j = 0; j &< POINT; j++) {
					if (i + j &< POINT) {
						var A = Math.abs(circleArr[i+j].x - circleArr[i].x),
							B = Math.abs(circleArr[i+j].y - circleArr[i].y);
						var lineLength = Math.sqrt(A*A + B*B);
						var C = 1/lineLength*7-0.009;
						var lineOpacity = C &> 0.03 ? 0.03 : C;

						if (lineOpacity &> 0) {

							drawLine(context, circleArr[i].x, circleArr[i].y, circleArr[i+j].x, circleArr[i+j].y, lineOpacity);

						}

					}

				}

			}

		}

//調用執行 window.onload = function () { init(); setInterval(function () { for (var i = 0; i &< POINT; i++) { var cir = circleArr[i]; cir.x += cir.moveX; cir.y += cir.moveY; if (cir.x &> WIDTH) cir.x = 0; else if (cir.x &< 0) cir.x = WIDTH; if (cir.y &> HEIGHT) cir.y = 0; else if (cir.y &< 0) cir.y = HEIGHT; } draw(); }, 16); } & & &

應該說的是這個吧VincentGarreau/particles.js · GitHub

瀉藥是 canvas

這個作為背景，可是想在body裡面加東西，顯示不了。應該怎麼弄？謝謝

請問能不能轉化成東動態的圖片呢？