时兴的动态性情况连线殊效。下面的编码是作者在扒下来的编码勤奋行梳理和注解，很融入参照学习培训。
实际效果截图：
实际效果演试：https://jc1144096387.github.io/canvas_nest/
作者详细地址：https://blog.csdn.net/u013556477/article/details/82819785
HTML编码（检测编码）:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>canvas情景连线殊效</title>
<style type="text/css">*{ margin: 0px; padding: 0px; } body{ background-color: #f4f4f4; }</style></head>
<body>
<!-- <canvas id="c_n9" width="1366" height="403" style="position: fixed; top: 0px; left: 0px; z-index: ⑴; opacity: 0.5;"></canvas> -->
<script type="text/javascript" src="test-clear.js" opacity=0 .6></script>
</body>
</html>
Javascript编码：
//马上实行涵数
//!的功效是告知javascript模块这是1个涵数表述式，并不是涵数申明，()、！、+、-等运算符都能完成这个功效，但是()是最安全性的
//在!function(){}后边再加()会马上启用这个涵数
//这样做能够效仿1个独享功效域，这样html文档引入好几个js文档时便不容易导致自变量矛盾
!
function() {
//canvas元素有关
//建立canvas元素，并设定canvas元素的id
var canvas = document.createElement("canvas"),
context = canvas.getContext("2d"),
attr = getAttr();
//设定建立的canvas的有关特性
canvas.id = "c_n" + attr.length;
canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + attr.z + ";opacity:" + attr.opacity;
//将canvas元素加上到body元素中
document.getElementsByTagName("body")[0].appendChild(canvas);
//该涵数设定了canvas元素的width特性和height特性
getWindowWH();
//onresize 恶性事件会在对话框或架构被调剂尺寸时产生
//此处即为当对话框尺寸更改时，再次获得对话框的宽高和设定canvas元素的宽高
window.onresize = getWindowWH;
//该涵数会获得引入了本文档的script元素，
//由于本文档中在取值时实行了1次getScript涵数，html文档引入本文档时，本文档以后的script标识都还没被访问器解释，
//因此获得的script数字能量数组中，引入了本文的script元素在该数字能量数组的结尾
//该涵数的作用为使开发设计者能立即改动在html中引进该文档的script元素的特性来改动画布的1些特性，画布的z-index，全透明度和小方块数量，色调
//与前面往body元素加上canvas元素的编码相互配合，当开发设计者要想应用该殊效做为情况时，只需在html文档中加上script元素并引入本文档便可
function getAttr() {
let scripts = document.getElementsByTagName("script"),
len = scripts.length,
script = scripts[len - 1]; //v为最终1个script元素，即引入了本文档的script元素
return {
length: len,
z: script.getAttribute("zIndex") || ⑴,
opacity: script.getAttribute("opacity") || 0.5,
color: script.getAttribute("color") || "0,0,0",
count: script.getAttribute("count") || 99
}
}
//得到对话框宽高，并设定canvas元素宽高
function getWindowWH() {
W = canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
H = canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
//转化成任意部位的小方块
var random = Math.random,
squares = []; //储放小方块
//往squares[]数字能量数组放小方块
for (let p = 0; p < attr.count; p++) {
var square_x = random() * W,
//横座标
square_y = random() * H,
//纵座标
square_xa = 2 * random() - 1,
//x轴位移 ⑴,1
square_ya = 2 * random() - 1; //y轴位移
squares.push({
x: square_x,
y: square_y,
xa: square_xa,
ya: square_ya,
max: 6000
})
}
//转化成电脑鼠标小方块
var mouse = {
x: null,
y: null,
max: 20000
};
//获得电脑鼠标所属座标
window.onmousemove = function(i) {
//i为W3C DOM，window.event 为 IE DOM，以完成适配IE
//但是现阶段好像IE早已适用W3C DOM，我用的是IE11，我注解掉下1句编码也能完成电脑鼠标互动实际效果，
//在网上说7/8/9是不适用的，自己沒有实验，
//自然再加是沒有错的
i = i || window.event;
mouse.x = i.clientX;
mouse.y = i.clientY;
}
//电脑鼠标移出对话框后，清除电脑鼠标小方块
window.onmouseout = function() {
mouse.x = null;
mouse.y = null;
}
//绘图小方块，小方块挪动(碰到界限反方向挪动)，小方块受电脑鼠标拘束
var animation = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(i) {
window.setTimeout(i, 1000 / 45)
}; //各个访问器适用的requestAnimationFrame有一定的不一样，适配各个访问器
function draw() {
//消除画布
context.clearRect(0, 0, W, H);
var w = [mouse].concat(squares); //联接(合拼)电脑鼠标小方块数字能量数组和别的小方块数字能量数组
var x, v, A, B, z, y;
//square特性表：x，y，xa，ya，max
squares.forEach(function(i) {
//完成小方块定项挪动
i.x += i.xa;
i.y += i.ya;
// 操纵小方块挪动方位
// 当小方块做到对话框界限时，反方向挪动
i.xa = i.xa * (i.x > W || i.x < 0 ? ⑴ : 1);
i.ya = i.ya * (i.y > H || i.y < 0 ? ⑴ : 1);
//fillRect前两个主要参数为矩形框左上角的x，y座标，后两个各自为宽度和高宽比
//绘图小方块
context.fillRect(i.x - 0.5, i.y - 0.5, 1, 1);
//遍历w中全部元素
for (let n = 0; n < w.length; n++) {
x = w[n];
//假如x与i并不是同1个目标案例且x的xy座标存在
if (i !== x && null !== x.x && null !== x.y) {
x_diff = i.x - x.x; //i和x的x座标差
y_diff = i.y - x.y; //i和x的y座标差
distance = x_diff * x_diff + y_diff * y_diff; //斜边平方
if (distance < x.max) {
//使i小方块受电脑鼠标小方块拘束，即假如i小方块与电脑鼠标小方块间距过大，i小方块会被电脑鼠标小方块拘束,
//导致 好几个小方块以电脑鼠标为圆心，mouse.max/2为半径绕成1圈
if (x === mouse && distance > x.max / 2) {
i.x = i.x - 0.03 * x_diff;
i.y = i.y - 0.03 * y_diff;
}
A = (x.max - distance) / x.max;
context.beginPath();
//设定画笔的画线的粗细与两个小方块的间距有关，范畴0-0.5，两个小方块间距越远画线越细，做到max时画线消退
context.lineWidth = A / 2;
//设定画笔的画线色调为s.c即画布色调，全透明度为(A+0.2)即两个小方块间距越远画线越淡
context.strokeStyle = "rgba(" + attr.color + "," + (A + 0.2) + ")";
//设定画笔的笔触为i小方块
context.moveTo(i.x, i.y);
//使画笔的笔触挪动到x小方块
context.lineTo(x.x, x.y);
//进行画线的绘图，即绘图联接小方块的线
context.stroke();
}
}
}
//把i小方块从w数字能量数组中去掉
//避免两个小方块反复连线
w.splice(w.indexOf(i), 1);
});
//window.requestAnimationFrame与setTimeout类似，产生递归启用，
//但是window.requestAnimationFrame选用系统软件時间间距，维持最好绘图高效率,出示了更好地提升，使动漫更顺畅
//历经访问器提升，动漫更顺畅；
//对话框没激活时，动漫将终止，省测算資源;
animation(draw);
}
//此处是等候0.1秒后，实行1次draw()，真实的动漫实际效果是用window.requestAnimationFrame完成的
setTimeout(function() {
draw();
},
100)
} ();
源代码详细地址： https://github.com/jc1144096387/canvas_nest
总结
以上所述是网编给大伙儿详细介绍的分析html5 canvas完成情况电脑鼠标连线动态性实际效果编码,期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！
假如你感觉本文对你有协助，欢迎转载，烦请注明出处，感谢！