export function bgStart(){ //更新页面用requestAnimationFrame替代setTimeout window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var w = canvas.width = canvas.offsetWidth; var h = canvas.height = canvas.offsetHeight; var circles = []; var current_circle = new currentCircle(0, 0); function init(num) { document.getElementById('userLayout').style.background='#333' for(var i = 0; i < num; i ++) { circles.push(new circle(Math.random() * w, Math.random() * h)); } draw(); } function draw() { ctx.clearRect(0, 0, w, h); for(var i = 0; i < circles.length; i ++) { circles[i].move(w, h); circles[i].drawCircle(ctx); for(var j = i + 1; j < circles.length; j++) { circles[i].drawLine(ctx, circles[j]); } } if (current_circle.x) { current_circle.drawCircle(ctx); for (var k = 0; k < circles.length; k++) { current_circle.drawLine(ctx, circles[k]) } } requestAnimationFrame(draw); } window.onmousemove = function(e) { e = e || window.event; current_circle.x = e.clientX; current_circle.y = e.clientY; } window.onmouseout = function() { current_circle.x = null; current_circle.y = null; } //创建对象:圆 //x, y为坐标点, r为半径, _mx, _my为移动的距离 function circle(x, y) { this.x = x; this.y = y; this.r = Math.random() * 10; this._mx = 1 - (Math.random() * 2); this._my = 1 - (Math.random() * 2); //canvas画圆 this.drawCircle = drawCircle; function drawCircle(ctx) { ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, 360); ctx.fillStyle = 'rgba(204, 204, 204, 0.3)'; ctx.fill(); } this.move = move; function move(w, h) { this._mx = (this.x < w && this.x > 0) ? this._mx : (-this._mx); this._my = (this.y < h && this.y > 0) ? this._my : (-this._my); this.x += this._mx / 2; this.y += this._my / 2; } //canvas画线 //画直线是两个圆连线,为了避免直线过多,给圆圈距离设置了一个值,距离很远的圆圈,就不做连线处理 this.drawLine = drawLine; function drawLine(ctx, _circle) { var dx = this.x - _circle.x; var dy = this.y - _circle.y; var d = Math.sqrt(dx * dx + dy * dy); if (d < 150) { ctx.beginPath(); ctx.moveTo(this.x, this.y);//起点 ctx.lineTo(_circle.x, _circle.y);//终点 ctx.strokeStyle = 'rgba(204, 204, 204, 0.3)'; ctx.stroke(); } } } function currentCircle(x, y) { circle.call(this, x, y); this.drawCircle = drawCircle; function drawCircle(ctx) { ctx.beginPath(); ctx.arc(this.x, this.y, 8, 0, 360); ctx.fillStyle = 'rgba(255, 77, 54, 0.6)'; ctx.fill(); } } init(100) }