Let's talk about the effect first (funny)
https://jc1144096387.github.io/canvas_nest/
The first time I saw this special effect, I was shocked. I played it silently for a few minutes = =. Unfortunately, that website only has compressed code, and the background special effect of search connection can only find similar ones. The interaction effect is not good, so I spent n hours to reconstruct the code and add comments. Just now, when I was about to finish my work, I saw the code =... In an article on spider web effects.... However, it seems that there are not many comments and the effect is slightly different. So look at my code is also a good choice = =...
html Files for testing
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>canvas Scene connection effect</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: -1; opacity: 0.5;"></canvas> -->
<script type="text/javascript" src="test-clear.js" opacity= 0.6></script>
</body>
</html>
js file
//Execute function now
//! is used to tell the javascript engine that this is a function expression, not a function declaration, ()! Operators such as, +, - can achieve this function, but () is the safest
//Add () after! function() {} to call this function immediately
//In this way, you can imitate a private scope, so that when html files refer to multiple js files, they will not cause variable conflicts
! function () {
//canvas element correlation
//Create the canvas element and set the id of the canvas element
var canvas = document.createElement("canvas"),
context = canvas.getContext("2d"),
attr = getAttr();
//Set the related properties of the created canvas
canvas.id = "c_n" + attr.length;
canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + attr.z + ";opacity:" + attr.opacity;
//Add the canvas element to the body element
document.getElementsByTagName("body")[0].appendChild(canvas);
//This function sets the width and height attributes of the canvas element
getWindowWH();
//The onresize event occurs when a window or frame is resized
//This is to get the width and height of the window and set the width and height of the canvas element again when the window size changes
window.onresize = getWindowWH;
//This function will get the script element that references this file,
//Because the getScript function is executed once during the assignment in this file, when the html file references this file, the script label after this file has not been interpreted by the browser,
//So the script element of this article is referenced at the end of the script array
//The purpose of this function is to enable developers to directly modify the attributes of the script element of the file introduced into html to modify some attributes of the canvas, z-index, transparency, number of small squares and color of the canvas
//With the previous code that adds canvas element to body element, when developers want to use the special effect as background, they just need to add script element in html file and reference this file
function getAttr() {
let scripts = document.getElementsByTagName("script"),
len = scripts.length,
script = scripts[len - 1];//v is the last script element, which refers to the script element of this file
return {
length: len,
z: script.getAttribute("zIndex") || -1,
opacity: script.getAttribute("opacity") || 0.5,
color: script.getAttribute("color") || "0,0,0",
count: script.getAttribute("count") || 99
}
}
//Get the window width and height, and set the canvas element width and height
function getWindowWH() {
W = canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
H = canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
//Generate small squares with random positions
var random = Math.random,
squares = [];//Store cubes
//Place small squares in the squares [] array
for(let p = 0; p < attr.count; p ++){
var square_x = random() * W,//Abscissa
square_y = random() * H,//Ordinate
square_xa = 2 * random() - 1,//x-axis displacement-1,1
square_ya = 2 * random() - 1;//y axis displacement
squares.push({
x: square_x,
y: square_y,
xa: square_xa,
ya: square_ya,
max: 6000
})
}
//Generate mouse cubes
var mouse = {
x: null,
y: null,
max: 20000
};
//Get mouse coordinates
window.onmousemove = function (i) {
//i is W3C DOM and window.event is IE DOM to achieve IE compatibility
//However, it seems that IE already supports W3C DOM. I use IE11, and I can realize mouse interaction by commenting on the following code,
//It is said on the Internet that 7 / 8 / 9 is not supported. I have no experiment,
//Of course, there's nothing wrong with that
i = i || window.event;
mouse.x = i.clientX;
mouse.y = i.clientY;
}
//After the mouse moves out of the window, remove the small mouse box
window.onmouseout = function () {
mouse.x = null;
mouse.y = null;
}
//Draw a small square. The small square moves (reversely when touching the boundary). The small square is bound by the mouse
var animation = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (i) {
window.setTimeout(i, 1000 / 45)
};//Each browser supports different requestanimationframes, which are compatible with each browser
function draw() {
//Clear canvas
context.clearRect(0, 0, W, H);
var w = [mouse].concat(squares);//Connect (merge) the array of mouse cubes and other cubes
var x, v, A, B, z, y;
//square property sheet: x, y, xa, ya, max
squares.forEach(function (i) {
//Realize directional movement of small blocks
i.x += i.xa;
i.y += i.ya;
// Control the movement direction of small square
// When the small box reaches the window boundary, move backward
i.xa = i.xa * (i.x > W || i.x < 0 ? -1 : 1);
i.ya = i.ya * (i.y > H || i.y < 0 ? -1 : 1);
//The first two parameters of fillRect are the x and y coordinates of the upper left corner of the rectangle, and the last two are the width and height respectively
//Draw small squares
context.fillRect(i.x - 0.5, i.y - 0.5, 1, 1);
//Traverse all elements in w
for (let n = 0; n < w.length; n++) {
x = w[n];
//If x and i are not the same object instance and the xy coordinate of X exists
if (i !== x && null !== x.x && null !== x.y) {
x_diff = i.x - x.x;//x coordinate difference between i and x
y_diff = i.y - x.y;//y coordinate difference between i and x
distance = x_diff * x_diff + y_diff * y_diff;//Oblique square
if(distance < x.max){
//i small square is bound by the mouse small square, that is, if the distance between i small square and the mouse small square is too large, i small square will be bound by the mouse small square,
//Make multiple small squares with mouse as the center and mouse.max/2 as the radius to form a circle
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();
//Set the thickness of the line drawn by the brush to be related to the distance between the two small squares. The range is 0-0.5. The farther the two small squares are, the thinner the line is drawn. When it reaches max, the line will disappear
context.lineWidth = A / 2;
//Set the line color of the brush to s.c, that is, the canvas color, and the transparency to (A+0.2), that is, the farther the distance between the two small squares, the lighter the line
context.strokeStyle = "rgba(" + attr.color + "," + (A + 0.2) + ")";
//Set the brush stroke to i small box
context.moveTo(i.x, i.y);
//Move the brush stroke to the x small box
context.lineTo(x.x, x.y);
//Finish drawing lines, that is, drawing lines connecting small squares
context.stroke();
}
}
}
//Remove i small block from w array
//Prevent two small squares from connecting repeatedly
w.splice(w.indexOf(i), 1);
});
//window.requestAnimationFrame is similar to setTimeout, forming a recursive call,
//However, window.requestAnimationFrame adopts system time interval to maintain the best rendering efficiency, providing better optimization and making animation smoother
//After browser optimization, the animation is more smooth;
//When the window is not activated, the animation will stop, saving computing resources;
animation(draw);
}
//Here, after waiting for 0.1 seconds, execute draw() once, and the real animation effect is achieved with window.requestAnimationFrame
setTimeout(function () {
draw();
}, 100)
}();
If there is any mistake, please correct it
Welcome Daoyou to discuss relevant knowledge together
Finally, paste the source code
https://github.com/jc1144096387/canvas_nest
test is the draft change
Test clear is the sorted file
min is a compressed file