console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body style="background: #999999">
<canvas id="J_dotLine" style="width: 300px; height: 300px"></canvas>
<script>
function n(option) {
;(this.opt = this.extend(
{
dom: 'J_dotLine',
cw: 1e3,
ch: 500,
ds: 100,
r: 0.5,
dis: 100,
},
option
)),
(this.c = document.getElementById(this.opt.dom)),
(this.ctx = this.c.getContext('2d')),
(this.c.width = this.opt.cw),
(this.c.height = this.opt.ch),
(this.dotSum = this.opt.ds),
(this.radius = this.opt.r),
(this.disMax = this.opt.dis * this.opt.dis),
(this.dots = [])
var t =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (t) {
window.setTimeout(t, 1e3 / 60)
},
e = this,
o = {
x: null,
y: null,
label: 'mouse',
}
;(this.c.onmousemove = function (t) {
t = t || window.event
;(o.x = t.clientX - e.c.offsetLeft), (o.y = t.clientY - e.c.offsetTop)
}),
(this.c.onmouseout = function (t) {
;(o.x = null), (o.y = null)
}),
(this.animate = function () {
e.ctx.clearRect(0, 0, e.c.width, e.c.height),
e.drawLine([o].concat(e.dots)),
t(e.animate)
})
}
;(n.prototype.extend = function (t, e) {
for (var o in e) e[o] && (t[o] = e[o])
return t
}),
(n.prototype.addDots = function () {
for (var t, i = 0; i < this.dotSum; i++)
(t = {
x: Math.floor(Math.random() * this.c.width) - this.radius,
y: Math.floor(Math.random() * this.c.height) - this.radius,
ax: (2 * Math.random() - 1) / 1.5,
ay: (2 * Math.random() - 1) / 1.5,
}),
this.dots.push(t)
}),
(n.prototype.move = function (t) {
;(t.x += t.ax),
(t.y += t.ay),
(t.ax *=
t.x > this.c.width - this.radius || t.x < this.radius ? -1 : 1),
(t.ay *=
t.y > this.c.height - this.radius || t.y < this.radius ? -1 : 1),
this.ctx.beginPath(),
this.ctx.arc(t.x, t.y, this.radius, 0, 2 * Math.PI, !0),
this.ctx.stroke()
}),
(n.prototype.drawLine = function (t) {
var e,
o = this
this.dots.forEach(function (n) {
o.move(n)
for (var r = 0; r < t.length; r++)
if ((e = t[r]) !== n && null !== e.x && null !== e.y) {
var c,
d = n.x - e.x,
l = n.y - e.y,
h = d * d + l * l
if (!(Math.sqrt(h) > Math.sqrt(o.disMax)))
e.label &&
Math.sqrt(h) > Math.sqrt(o.disMax) / 2 &&
((n.x -= 0.02 * d), (n.y -= 0.02 * l)),
(c = (o.disMax - h) / o.disMax),
o.ctx.beginPath(),
(o.ctx.lineWidth = c / 2),
(o.ctx.strokeStyle =
'rgba(255,255,255,' + (c + 0.01) + ')'),
o.ctx.moveTo(n.x, n.y),
o.ctx.lineTo(e.x, e.y),
o.ctx.stroke()
}
})
}),
(n.prototype.start = function () {
var t = this
this.addDots(),
setTimeout(function () {
t.animate()
}, 100)
})
</script>
<script>
new n({
dom: 'J_dotLine',
cw: 300,
ch: 300,
ds: 45,
r: 3,
dis: 90,
}).start()
</script>
</body>
</html>