2018-7-27 seo達(dá)人
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<canvas id="cs"></canvas>
</div>
</body>
<script>
function MoveBalls(element, opts) {
var canvas = document.querySelector(element);
this.canvas = canvas;
this.ctx = canvas.getContext("2d");
var defaultOpts = {
total: 100,
color: "#00D0FF",
size: 1,
width: this.canvas.parentNode.clientWidth,
height: this.canvas.parentNode.clientHeight
};
var opts = opts || defaultOpts;
for (var key in opts) {
defaultOpts[key] = opts[key];
};
for (var key in defaultOpts) {
this[key] = defaultOpts[key];
};
opts = null;
defaultOpts = null;
// 鼠標(biāo)坐標(biāo)
this.coordinate = {
x: null,
y: null,
max: 100
};
// 粒子
this.dots = [];
// 含鼠標(biāo)坐標(biāo)的粒子數(shù)組
this.newDots = [];
// 總數(shù)
this.count = 0;
// requestAnimationFrame兼容處理
window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
window.setTimeout(callback, 1000 / 60);
};
this.colorReg = /[rgba()]/g;
this.init();
};
MoveBalls.prototype = {
constructor: MoveBalls,
init: function () {
var _this = this;
this.freshResize();
this.mouseEvent();
this.getDots();
var timer = setTimeout(function () {
clearTimeout(timer);
_this.draw(_this)
}, 300);
},
colorCheck: function () {
this.canvas.style.color = this.color;
var colorData = this.canvas.style.color;
return colorData = colorData.replace(this.colorReg, "").split(",");
},
resize: function (self) {
var _this = self || this;
_this.canvas.width = _this.width;
_this.canvas.height = _this.height;
},
freshResize: function () {
this.resize();
var _this = this;
window.addEventListener("resize", function () {
_this.resize(_this);
});
},
mouseEvent: function () {
var _this = this;
_this.canvas.addEventListener("mousemove", function (e) {
var e = e || winodw.event;
_this.coordinate.x = e.offsetX ? e.offsetX : e.layerX;
_this.coordinate.y = e.offsetY ? e.offsetY : e.layerY;
});
_this.canvas.addEventListener("mouseout", function () {
_this.coordinate.x = null;
_this.coordinate.y = null;
})
},
getDots: function () {
while(this.count < this.total) {
var x = Math.random() * this.canvas.width;
var y = Math.random() * this.canvas.height;
var xMove = Math.random() * 2 - 1;
var yMove = Math.random() * 2 - 1;
this.dots.push({
x: x,
y: y,
xMove: xMove,
yMove: yMove,
max: 100
});
this.count ++;
}
},
draw: function (self) {
var _this = self || this;
var ctx = _this.ctx;
ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
_this.newDots = [_this.coordinate].concat(_this.dots);
_this.dots.forEach(function (dot) {
dot.xMove *= (dot.x > _this.canvas.width || dot.x < 0) ? -1 : 1;
dot.yMove *= (dot.y > _this.canvas.height || dot.y < 0) ? -1 : 1;
dot.x += dot.xMove;
dot.y += dot.yMove;
// 繪制點(diǎn)
ctx.save();
ctx.beginPath();
ctx.arc(dot.x, dot.y, _this.size, 0, Math.PI * 5);
ctx.fillStyle = _this.color;
ctx.fill();
ctx.restore();
// 循環(huán)比對(duì)粒子間的距離
for (var i = 0; i < _this.newDots.length; i ++) {
var newDot = _this.newDots[i];
// 如果是第一個(gè)點(diǎn)，則跳過(guò)
if(newDot === dot || newDot.x === null || newDot.y === null) continue;
var xDistance = dot.x - newDot.x;
var yDistance = dot.y - newDot.y;
var distance = Math.sqrt(Math.pow(xDistance, 2) + Math.pow(yDistance, 2));
// 顏色深度
var deep = 0;
// 小于最小距離，則連線
if (distance <= newDot.max) {
// 附近的小球向鼠標(biāo)位置移動(dòng)
if(newDot === _this.coordinate && distance > (newDot.max / 2)) {
dot.x -= xDistance * 0.05;
dot.y -= yDistance * 0.05;
}
// 距離越近---值越大---顏色越深
deep = (newDot.max - distance) / newDot.max;
// 畫(huà)線
ctx.save();
ctx.beginPath();
ctx.lineWidth = deep / 2;
var colorInfo = _this.colorCheck();
ctx.strokeStyle = "rgba(" + colorInfo[0] + ", " + colorInfo[1] + ", " + colorInfo[2] + "," + (deep + 0.4) + ")";
ctx.moveTo(dot.x, dot.y);
ctx.lineTo(newDot.x, newDot.y);
ctx.stroke();
ctx.restore();
}
}
// 將已經(jīng)計(jì)算過(guò)的粒子刪除，減少遍歷的總數(shù)量
_this.newDots.splice(_this.newDots.indexOf(dot), 1);
});
window.requestAnimationFrame(function (obj) {
_this.draw(_this);
});
}
}
var moveBalls = new MoveBalls("#cs", {total: 66, color: "#00D0FF", size: 1});
</script>
</html>
藍(lán)藍(lán)設(shè)計(jì)( www.alimai.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.alimai.net