⽹站动态背景线条跟随⿏标移动，吸附⿏标效果
⽹站动态背景线条跟随⿏标移动，吸附⿏标效果
动态背景线条，⿏标移动可以吸附，可以添加配置，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>粒⼦线条canvas效果</title>
<style>
#J_dotLine {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="J_dotLine"></canvas>
<script>
; (function (window) {
function Dotline(option) {
this.opt = d({
dom: 'J_dotLine',//画布id
cw: 1000,//画布宽
ch: 500,//画布⾼
ds: 100,//点的个数
r: 0.5,//圆点半径
cl: '#000',//颜⾊
dis: 100//触发连线的距离
}, option);
this.c = ElementById(this.opt.dom);//canvas元素id
< = Context('2d');
this.dotSum = this.opt.ds;//点的数量
this.radius = this.opt.r;//圆点的半径
this.disMax = this.opt.dis * this.opt.dis;//点与点触发连线的间距
this.dots = [];
//requestAnimationFrame控制canvas动画
var RAF = questAnimationFrame || window.webkitRequestAnimationFrame || RequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {                    window.setTimeout(callback, 1000 / 60);
};
var _self = this;
/
/增加⿏标效果
var mousedot = { x: null, y: null, label: 'mouse' };
var e = e || window.event;
mousedot.x = e.clientX - _ffsetLeft;
mousedot.y = e.clientY - _ffsetTop;
};
mousedot.x = null;
mousedot.y = null;
}
/
/控制动画
this.animate = function () {
_learRect(0, 0, _width, _height);
_self.drawLine([mousedot].concat(_self.dots));
RAF(_self.animate);
};
}
//合并配置项，es6直接使⽤obj.assign();
d = function (o, e) {
for (var key in e) {
if (e[key]) {
o[key] = e[key]
}
}
return o;
};
lor2rgb = function (colorStr) {
var red = null,
green = null,
blue = null;
var cstr = LowerCase();//变⼩写
var cReg = /^#[0-9a-fA-F]{3,6}$/;//确定是16进制颜⾊码
if (cstr && st(cstr)) {
if (cstr.length == 4) {
var cstrnew = '#';
for (var i = 1; i < 4; i++) {
cstrnew += cstr.slice(i, i + 1).concat(cstr.slice(i, i + 1));
}
cstr = cstrnew;
}
red = parseInt('0x' + cstr.slice(1, 3));
green = parseInt('0x' + cstr.slice(3, 5));
blue = parseInt('0x' + cstr.slice(5, 7));
}
return red + ',' + green + ',' + blue;
}
//画点
Dotline.prototype.addDots = function () {
var dot;
for (var i = 0; i < this.dotSum; i++) {//参数
dot = {
x: Math.floor(Math.random() * width) - this.radius,
y: Math.floor(Math.random() * height) - this.radius,
ax: (Math.random() * 2 - 1) / 1.5,
ay: (Math.random() * 2 - 1) / 1.5
}
this.dots.push(dot);
}
};
//点运动
ve = function (dot) {
dot.x += dot.ax;
dot.y += dot.ay;
//点碰到边缘返回
dot.ax *= (dot.x > (width - this.radius) || dot.x < this.radius) ? -1 : 1;
dot.ay *= (dot.y > (height - this.radius) || dot.y < this.radius) ? -1 : 1;
//绘制点
};
//点之间画线
Dotline.prototype.drawLine = function (dots) {
var nowDot;
var _that = this;
//⾃⼰的思路：遍历两次所有的点，⽐较点之间的距离，函数的触发放在animate⾥
this.dots.forEach(function (dot) {
_ve(dot);
for (var j = 0; j < dots.length; j++) {
nowDot = dots[j];
if (nowDot === dot || nowDot.x === null || nowDot.y === null) continue;//continue跳出当前循环开始新的循环
var dx = dot.x - nowDot.x,//别的点坐标减当前点坐标
dy = dot.y - nowDot.y;
var dc = dx * dx + dy * dy;
if (Math.sqrt(dc) > Math.sqrt(_that.disMax)) continue;
// 如果是⿏标，则让粒⼦向⿏标的位置移动
if (nowDot.label && Math.sqrt(dc) > Math.sqrt(_that.disMax) / 2) {
dot.x -= dx * 0.02;
dot.y -= dy * 0.02;
}
var ratio;
ratio = (_that.disMax - dc) / _that.disMax;
_beginPath();
_lineWidth = ratio / 2;
_strokeStyle = 'rgba(' + _lor + ',' + parseFloat(ratio + 0.2).toFixed(1) + ')';
_veTo(dot.x, dot.y);
_lineTo(nowDot.x, nowDot.y);
_stroke();//不描边看不出效果
/
/dots.splice(dots.indexOf(dot), 1);
}
});
};
//开始动画
Dotline.prototype.start = function () {
var _that = this;
this.addDots();
setTimeout(function () {
_that.animate();
}, 100);
}
window.Dotline = Dotline;
}(window));
//调⽤
var dotline = new Dotline({
dom: 'J_dotLine',//画布id
cw: 1000,//画布宽
ch: 500,//画布⾼
ds: 100,//点的个数
r: 0.5,//圆点半径
cl: '#fff',//粒⼦线颜⾊
dis: 100//触发连线的距离
}).start();
}
</script>
</body>
</html>
vue，react写法，类分装：
创建⼀个dotline.js
class Dotline {
constructor(option) {
this.opt = d({
dom: 'J_dotLine',//画布id
cw: 1000,//画布宽
ch: 500,//画布⾼
ds: 100,//点的个数
r: 0.5,//圆点半径
cl: '#000',//颜⾊
dis: 100//触发连线的距离
}, option);
this.c = ElementById(this.opt.dom);//canvas元素id
< = Context('2d');
this.dotSum = this.opt.ds;//点的数量
this.radius = this.opt.r;//圆点的半径
this.disMax = this.opt.dis * this.opt.dis;//点与点触发连线的间距
this.dots = [];
//requestAnimationFrame控制canvas动画
var RAF = questAnimationFrame || window.webkitRequestAnimationFrame || RequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {      window.setTimeout(callback, 1000 / 60);
};
var _self = this;
//增加⿏标效果
var mousedot = { x: null, y: null, label: 'mouse' };
var e = e || window.event;
mousedot.x = e.clientX - _ffsetLeft;
mousedot.y = e.clientY - _ffsetTop;
};
mousedot.x = null;
mousedot.y = null;
}
//控制动画
this.animate = function () {
_learRect(0, 0, _width, _height);
_self.drawLine([mousedot].concat(_self.dots));
RAF(_self.animate);
};
}
//合并配置项，es6直接使⽤obj.assign();
extend(o, e) {
for (var key in e) {
if (e[key]) {
o[key] = e[key]
}
}
return o;
}
//设置线条颜⾊
color2rgb(colorStr) {
var red = null,
green = null,
blue = null;
var cstr = LowerCase();//变⼩写
var cReg = /^#[0-9a-fA-F]{3,6}$/;//确定是16进制颜⾊码
if (cstr && st(cstr)) {
if (cstr.length == 4) {
var cstrnew = '#';
for (var i = 1; i < 4; i++) {
cstrnew += cstr.slice(i, i + 1).concat(cstr.slice(i, i + 1));
}
cstr = cstrnew;
}
red = parseInt('0x' + cstr.slice(1, 3));
green = parseInt('0x' + cstr.slice(3, 5));
blue = parseInt('0x' + cstr.slice(5, 7));
}
return red + ',' + green + ',' + blue;
}
//画点
addDots() {
var dot;
for (var i = 0; i < this.dotSum; i++) {//参数
dot = {
x: Math.floor(Math.random() * width) - this.radius,
y: Math.floor(Math.random() * height) - this.radius,
ax: (Math.random() * 2 - 1) / 1.5,
ay: (Math.random() * 2 - 1) / 1.5
}
this.dots.push(dot);
}
}
//点运动
move(dot) {
dot.x += dot.ax;
dot.y += dot.ay;
//点碰到边缘返回
dot.ax *= (dot.x > (width - this.radius) || dot.x < this.radius) ? -1 : 1;
dot.ay *= (dot.y > (height - this.radius) || dot.y < this.radius) ? -1 : 1;
//绘制点
}
//点之间画线
drawLine(dots) {
var nowDot;
var _that = this;
//⾃⼰的思路：遍历两次所有的点，⽐较点之间的距离，函数的触发放在animate⾥
this.dots.forEach(function (dot) {
_ve(dot);
for (var j = 0; j < dots.length; j++) {canvas动画
nowDot = dots[j];
if (nowDot === dot || nowDot.x === null || nowDot.y === null) continue;//continue跳出当前循环开始新的循环        var dx = dot.x - nowDot.x,//别的点坐标减当前点坐标
dy = dot.y - nowDot.y;
var dc = dx * dx + dy * dy;
if (Math.sqrt(dc) > Math.sqrt(_that.disMax)) continue;
// 如果是⿏标，则让粒⼦向⿏标的位置移动
if (nowDot.label && Math.sqrt(dc) > Math.sqrt(_that.disMax) / 2) {
dot.x -= dx * 0.02;
dot.y -= dy * 0.02;
}
var ratio;
ratio = (_that.disMax - dc) / _that.disMax;
_beginPath();
_lineWidth = ratio / 2;
_strokeStyle = 'rgba(' + _lor + ',' + parseFloat(ratio + 0.2).toFixed(1) + ')';
_veTo(dot.x, dot.y);
_lineTo(nowDot.x, nowDot.y);
_stroke();//不描边看不出效果
//dots.splice(dots.indexOf(dot), 1);
}
});
}
//开始动画
start() {
var _that = this;
this.addDots();
setTimeout(function () {
_that.animate();
}, 100);
}
}
export default Dotline;
调⽤⽅法：
html：
<canvas id="J_dotLine"></canvas>
js:
import Dotline from "./dotline.js";
const option = {
dom: 'J_dotLine',//画布id
cw: 1000,//画布宽
ch: 500,//画布⾼
ds: 250,//点的个数
r: 3,//圆点半径
cl: '#061eb3',//粒⼦线颜⾊
dis: 120//触发连线的距离
}
const dotline = new Dotline(option).start();
-------------------------------------------------------------------------------------------------<template>
<div>
<canvas id="J_dotLine"></canvas>
</div>
</template>
<script>
import Dotline from "../../assets/js/dotline.js";
export default {
mounted: function () {
this.swippertab();
},
methods: {
swippertab() {
const option = {
dom: "J_dotLine", //画布id
cw: 1000, //画布宽
ch: 500, //画布⾼
ds: 250, //点的个数
r: 3, //圆点半径
cl: "#8FDAF8", //粒⼦线颜⾊
dis: 120, //触发连线的距离
};
new Dotline(option).start();
},
},
};
</script>
<style>
</style>