Effets de connexion d'arrière-plan dynamiques populaires. Le code ci-dessous est organisé et commenté par l'auteur sur le code extrait, ce qui est très adapté à l'apprentissage de référence.
Capture d'écran de l'effet :
Démonstration d'effet : https://jc1144096387.github.io/canvas_nest/
Adresse de l'auteur : https://blog.csdn.net/u013556477/article/details/82819785
Code HTML (code de test) :
<!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>Effets de connexion de scène de canevas</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 : top : 0px left : 0px ; ; z-index : -1 ; opacité : 0,5;></canvas> --> <script type=text/javascript src=test-clear.js opacity=0 .6></script></body></html>Code Javascript :
//Exécuter la fonction immédiatement //! est utilisé pour indiquer au moteur JavaScript qu'il s'agit d'une expression de fonction, pas d'une déclaration de fonction, (), ! , +, - et d'autres opérateurs peuvent obtenir cet effet, mais () est le plus sûr // L'ajout de () après !function(){} appellera la fonction immédiatement // Cela peut simuler une portée privée, de cette façon, le html Le fichier ne provoquera pas de conflits de variables lors du référencement de plusieurs fichiers js ! function() { // Élément de canevas lié // Créez un élément de canevas et définissez l'identifiant de l'élément de canevas var canvas = document.createElement(canvas), context = canvas .getContext (2d), attr = getAttr(); //Définit les attributs associés du canevas créé canvas.id = c_n + attr.length; canvas.style.cssText = position:fixed;top:0;left:0;z-index: + attr.z + ;opacity: + attr.opacity; //Ajouter l'élément canvas à l'élément body document.getElementsByTagName(body)[0].appendChild(canvas); //Cette fonction définit l'attribut width et l'attribut height de l'élément canvas getWindowWH(); //L'événement onresize se produira lorsque la fenêtre ou le cadre est redimensionné //Voici lorsque la taille de la fenêtre change, la largeur et la hauteur de la fenêtre sont réacquis Et définissez la largeur et la hauteur de l'élément de canevas window.onresize = getWindowWH; //Cette fonction obtiendra l'élément de script qui fait référence à ce fichier. //Comme la fonction getScript est exécutée une fois lors de l'affectation dans ce fichier, lorsque le fichier html fait référence à ce fichier, la balise de script après ce fichier n'a pas été interprétée par le navigateur. //Donc dans le tableau de script obtenu, l'élément de script qui référence cet article est en fin de tableau. //Le but de cette fonction est de permettre aux développeurs de modifier directement les attributs de l'élément de script qui introduit le fichier en HTML pour modifier certaines propriétés du canevas. , le z-index du canevas, la transparence et le nombre de petits carrés, la couleur // Coopérer avec le code précédent pour ajouter l'élément canevas à l'élément corps Lorsque le développeur souhaite l'utiliser. cet effet spécial comme arrière-plan, il lui suffit d'ajouter l'élément de script au fichier html et de citer simplement ce fichier function getAttr() { let scripts = document.getElementsByTagName(script), len = scripts.length, script = scripts[len - 1]; //v est le dernier élément de script, qui fait référence à l'élément de script de ce document return { length: len, z: script. getAttribute (zIndex) || -1, opacité : script.getAttribute(opacity) || 0,5, couleur : script.getAttribute(color) || script.getAttribute(count) || 99 } } //Obtient la largeur et la hauteur de la fenêtre et définit la largeur et la hauteur de l'élément de canevas function getWindowWH() { W = canvas.width = window.innerWidth || | document.body .clientWidth, H = canvas.height = window.innerHeight || document.documentElement.clientHeight || //Générer des petits carrés à des positions aléatoires var random = Math.random, squares = []; //Stockage des petits carrés//Placer les petits carrés dans le tableau squares[] pour (let p = 0; p < attr.count; p++ ) { var square_x = random() * W, //abscisse square_y = random() * H, //ordonnée square_xa = 2 * random() - 1, //déplacement sur l'axe x-1,1 square_ya = 2 * aléatoire () - 1; //Déplacement de l'axe Y squares.push({ x: square_x, y: square_y, xa: square_xa, ya: square_ya, max: 6000 }) } //Générer un petit carré de souris var mouse = { x: null, y: null, max: 20000 }; //Obtenir les coordonnées de la souris window.onmousemove = function(i) { //i est le DOM W3C, window.event Pour IE DOM, pour obtenir la compatibilité avec IE //Cependant, il semble qu'IE prenne actuellement en charge le W3C DOM. J'utilise IE11, je peux également obtenir des effets d'interaction avec la souris en commentant la ligne de code suivante. 7/8/9 n'est pas pris en charge. Oui, je ne l'ai pas testé. //Bien sûr, il est correct d'ajouter i = i window.event; ; } //Une fois la souris sortie de la fenêtre, retirez la souris Petit carré window.onmouseout = function() { mouse.x = null; mouse.y = null; } //Dessine un petit carré, le petit carré se déplace (mouvement inverse en touchant la limite), le petit carré est délimité par la souris var animation = window .requestAnimationFrame || fenêtre .webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || 45) }; //Le requestAnimationFrame pris en charge par chaque navigateur est différent et il est compatible avec chaque fonction de navigateur draw() { //Effacer le canevas context.clearRect(0, 0, W, H); ].concat (squares); //Connectez (fusionnez) le petit tableau carré de la souris et d'autres petits tableaux carrés var x, v, A, B, z, y; //table attributaire du carré : x, y, xa, ya, maximum squares.forEach(function(i) { //Réaliser le mouvement directionnel des petits carrés ix += i.xa; iy += i.ya; //Contrôler la direction du mouvement des petits carrés//Quand le petit carré atteint la fenêtre frontière, se déplacer dans la direction opposée i.xa = i.xa * (ix > W || ix < 0 ? -1 : 1) ; i.ya = i.ya * (iy > H || iy < 0 ? -) 1 : 1); //Les deux premiers paramètres de fillRect sont les coordonnées x, y du coin supérieur gauche du rectangle, et les deux derniers sont respectivement la largeur et la hauteur //Dessinez un petit carré context.fillRect(ix - 0.5, iy - 0.5 , 1, 1); //Traverse tous les éléments de w pour (soit n = 0; n < w.length; n++) { x = w[n]; //Si x et i ne sont pas la même instance d'objet et le les coordonnées xy de x existent si (i !== x && null !== xx && null !== xy) { x_diff = ix - xx; //La différence entre les coordonnées x de i et x y_diff = iy - xy; //La différence entre les coordonnées y de i et x distance = x_diff * x_diff + y_diff * y_diff; //Hypoténuse au carré si (distance < x.max) { //Faire en sorte que le petit carré i soit délimité par le petit carré de la souris, c'est-à-dire que si la distance entre le petit carré i et le petit carré de la souris est trop grande, le petit carré i sera délimité par le petit carré de la souris, // résultant en plusieurs petits carrés avec la souris comme centre, mouse.max /2 est le rayon pour faire un cercle si (x === souris && distance > x.max / 2) { ix = ix - 0,03 * x_diff ; iy = iy - 0,03 * y_diff } A = (x.max - distance) / x.max; context.beginPath(); //Définissez l'épaisseur du trait du pinceau en fonction de la distance entre les deux petits carrés, allant de 0 à 0,5. plus la ligne est fine, atteignant le maximum La ligne disparaît lorsque la ligne est tracée context.lineWidth = A / 2 // Définissez la couleur de ligne du pinceau sur sc, qui est la couleur du canevas, et la transparence sur (A+0,2) , c'est-à-dire que plus les deux petits carrés sont éloignés, plus la ligne est claire context.StrokeStyle = rgba ( +. attr.color + , + (A + 0.2) + ); //Définissez le coup de pinceau sur le i petit carré context.moveTo(ix, iy //Déplacez le coup de pinceau vers le x petit carré context.lineTo(xx); , xy); //Terminer le dessin de la ligne, c'est-à-dire tracer la ligne reliant les petits carrés context.stroke(); //Supprimer le petit carré i du tableau w //Empêcher la connexion répétée de deux petits carrés w.splice(w.indexOf(i), 1 }); //window.requestAnimationFrame est similaire à setTimeout, formant un appel récursif. , //Cependant, window.requestAnimationFrame utilise l'intervalle de temps du système pour maintenir la meilleure efficacité de dessin et fournit une meilleure optimisation pour rendre l'animation plus fluide//Après l'optimisation du navigateur, l'animation est plus fluide ; //Lorsque la fenêtre n'est pas activée, l'animation s'arrêtera pour économiser les ressources informatiques ; animation(draw } //Ici, après avoir attendu 0,1 seconde, exécutez draw() une fois. Le véritable effet d'animation est setTimeout( implémenté par window. .requestAnimationFrame function() { draw(); }, 100)} ();Adresse du code source : https://github.com/jc1144096387/canvas_nest
RésumerCe qui précède est le code pour analyser le canevas html5 pour obtenir les effets dynamiques de connexion de la souris en arrière-plan introduits par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. . Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !
Si vous pensez que cet article vous est utile, n'hésitez pas à le réimprimer, veuillez indiquer la source, merci !