123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108 |
- 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)
- }
|