Beliebte dynamische Hintergrundverbindungseffekte. Der folgende Code wurde vom Autor zum extrahierten Code organisiert und kommentiert, der sich sehr gut für das Referenzlernen eignet.
Effekt-Screenshot:
Effektdemonstration: https://jc1144096387.github.io/canvas_nest/
Autorenadresse: https://blog.csdn.net/u013556477/article/details/82819785
HTML-Code (Testcode):
<!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=Beschreibung content=> <title>Canvas-Szenenverbindungseffekte</title> <style type=text/css>*{ margin: 0px; padding: 0px; } body{ Hintergrundfarbe: #f4f4f4; </style></head><body> <!-- <canvas id=c_n9 width=1366 height=403 style=position: behoben; oben: 0px; ; z-index: -1; opacity: 0,5;></canvas> --> <script type=text/javascript src=test-clear.js opacity=0 .6></script></body></html>Javascript-Code:
//Funktion sofort ausführen // wird verwendet, um der JavaScript-Engine mitzuteilen, dass es sich um einen Funktionsausdruck und nicht um eine Funktionsdeklaration handelt, (),! , +, - und andere Operatoren können diesen Effekt erzielen, aber () ist am sichersten // Das Hinzufügen von () nach !function(){} ruft die Funktion sofort auf // Dies kann einen privaten Bereich simulieren. Auf diese Weise wird der HTML file verursacht keine Variablenkonflikte, wenn auf mehrere js-Dateien verwiesen wird! function() { //Canvas-Element bezogen // Erstellen Sie ein Canvas-Element und legen Sie die ID des Canvas-Elements fest var canvas = document.createElement(canvas), context = canvas .getContext (2d), attr = getAttr(); //Legen Sie die zugehörigen Attribute der erstellten Leinwand fest. canvas.id = c_n + attr.length; + ;opacity: + attr.opacity; //Das Canvas-Element zum Body-Element hinzufügen document.getElementsByTagName(body)[0].appendChild(canvas); //Diese Funktion legt das Breitenattribut und das Höhenattribut des Canvas-Elements fest. getWindowWH(); //Das onresize-Ereignis tritt auf, wenn die Größe des Fensters oder Rahmens geändert wird. //Hier werden die Breite und Höhe des Fensters geändert, wenn sich die Fenstergröße ändert werden erneut abgerufen und legen die Breite und Höhe des Canvas-Elements fest window.onresize = getWindowWH; //Diese Funktion ruft das Skriptelement ab, das auf diese Datei verweist. // Da die getScript-Funktion während der Zuweisung in dieser Datei einmal ausgeführt wird und die HTML-Datei auf diese Datei verweist, wurde das Skript-Tag nach dieser Datei vom Browser nicht interpretiert. //Im erhaltenen Skriptarray befindet sich also das Skriptelement, das auf diesen Artikel verweist, am Ende des Arrays //Der Zweck dieser Funktion besteht darin, Entwicklern die direkte Änderung der Attribute des Skriptelements zu ermöglichen, das die Datei in HTML einführt Ändern Sie einige Eigenschaften der Leinwand, den Z-Index der Leinwand, die Transparenz und die Anzahl der kleinen Quadrate sowie die Farbe. // Arbeiten Sie mit dem vorherigen Code zusammen, um das Canvas-Element zum Body-Element hinzuzufügen Um diesen Spezialeffekt als Hintergrund zu verwenden, muss er nur das Skriptelement zur HTML-Datei hinzufügen und einfach diese Dateifunktion getAttr() { let scripts = zitieren document.getElementsByTagName(script), len = scripts.length, script = scripts[len - 1]; //v ist das letzte Skriptelement, das auf das Skriptelement dieses Dokuments verweist return { length: len, z: script. getAttribute (zIndex) ||. -1, Deckkraft: script.getAttribute(opacity) ||. script.getAttribute(count) ||. 99 } } // Ermittelt die Fensterbreite und -höhe und legt die Breite und Höhe des Canvas-Elements fest. Funktion getWindowWH() { W = canvas.width = window.innerWidth || |. document.body .clientWidth, H = canvas.height = window.innerHeight ||. //Kleine Quadrate an zufälligen Positionen generieren var random = Math.random, quadrate = []; //Kleine Quadrate speichern/Kleine Quadrate in das Quadrate[]-Array einfügen für (let p = 0; p < attr.count; p++ ) { var quadrat_x = random() * W, //Abszisse quadrat_y = random() * H, //Ordinate quadrat_xa = 2 * random() - 1, //x-Achsen-Verschiebung-1,1 quadrat_ya = 2 * zufällig () - 1; //Y-Achsen-Verschiebung quadrate.push({ x: quadrat_x, y: quadrat_y, xa: quadrat_xa, ya: quadrat_ya, max: 6000 }) } //Erzeuge ein kleines Mausquadrat var mouse = { x: null, y: null, max: 20000 }; //Erhalte die Koordinaten der Maus window.onmousemove = function(i) { //i ist W3C DOM, window.event Für IE DOM, um Kompatibilität mit IE zu erreichen //Es scheint jedoch, dass ich derzeit IE11 verwende, indem ich die nächste Codezeile auskommentiere 7/8/9 wird nicht unterstützt. //Natürlich ist es richtig, i = i || hinzuzufügen ; } // Nachdem sich die Maus aus dem Fenster bewegt hat, entfernen Sie die Maus. Kleines quadratisches window.onmouseout = function() { Mouse.x = Null; Mouse.y = Null .requestAnimationFrame ||. window.mozRequestAnimationFrame ||. window.oRequestAnimationFrame ||. 45) }; //Der von jedem Browser unterstützte requestAnimationFrame ist unterschiedlich und mit jeder Browserfunktion kompatibel draw() { //Löschen Sie die Leinwand context.clearRect(0, 0, W, H); ].concat (Quadrate); //Das kleine quadratische Array der Maus und andere kleine quadratische Arrays verbinden (zusammenführen) var x, v, A, B, z, y; //quadratische Attributtabelle: x, y, xa, ya, max quadrate.forEach(function(i) { //Realisieren Sie die Richtungsbewegung kleiner Quadrate ix += i.xa; iy += i.ya; //Steuern Sie die Bewegungsrichtung kleiner Quadrate//Wenn das kleine Quadrat das Fenster erreicht Grenze, in die entgegengesetzte Richtung bewegen i.xa = i.xa * (ix > W || ix < 0 ? -1 : 1); 1 : 1); //Die ersten beiden Parameter von fillRect sind die x- und y-Koordinaten der oberen linken Ecke des Rechtecks, und die letzten beiden sind die Breite bzw. Höhe //Zeichne ein kleines Quadrat context.fillRect(ix - 0,5, iy - 0,5 , 1, 1); //Alle Elemente in w durchlaufen for (let n = 0; n < w.length; n++) { x = w[n]; //Wenn x und i nicht dieselbe Objektinstanz sind und die xy-Koordinaten von x existieren, wenn (i !== x && null !== xx && null !== xy) { x_diff = ix - xx; //Die Differenz zwischen den x-Koordinaten von i und x y_diff = iy - xy; //Die Differenz zwischen den y-Koordinaten von i und x distance = x_diff * x_diff + y_diff * y_diff; //Hypotenuse im Quadrat if (distance < x.max) { // Das kleine Quadrat i durch das kleine Quadrat der Maus binden. Das heißt, wenn der Abstand zwischen dem kleinen Quadrat i und dem kleinen Quadrat der Maus zu groß ist, wird das kleine Quadrat i durch das kleine Quadrat gebunden der Maus, //was zu mehreren kleinen Quadraten mit der Maus als Mittelpunkt führt, Mouse.max /2 ist der Radius, um einen Kreis zu bilden, wenn (x === Maus && Abstand > x.max / 2) { ix = ix - 0,03 * x_diff; iy = iy - 0,03 * y_diff } A = (x.max - distance) / x.max; context.beginPath(); //Stellen Sie die Dicke der Pinsellinie so ein, dass sie sich auf den Abstand zwischen den beiden kleinen Quadraten bezieht, im Bereich von 0 bis 0,5. Je dünner die Linie, desto mehr wird die Linie erreicht, wenn die Linie gezeichnet wird context.lineWidth = A / 2; //Setzen Sie die Linienfarbe des Pinsels auf sc, die Leinwandfarbe, und die Transparenz auf (A+0,2). , das heißt, je weiter die beiden kleinen Quadrate entfernt sind, desto heller ist die Linie context.StrokeStyle = rgba ( + attr.color + , + (A + 0.2) + ); //Setze den Pinselstrich auf das kleine Quadrat context.moveTo(ix, iy); //Bewege den Pinselstrich auf das kleine Quadrat context.lineTo(xx , xy); // Vervollständigen Sie das Zeichnen der Linie, das heißt, zeichnen Sie die Linie, die die kleinen Quadrate verbindet context.Stroke(); //Kleines Quadrat i aus w-Array entfernen //Verhindern Sie, dass zwei kleine Quadrate wiederholt verbunden werden w.splice(w.indexOf(i), 1 }); //window.requestAnimationFrame ähnelt setTimeout und bildet einen rekursiven Aufruf , // Allerdings verwendet window.requestAnimationFrame das Systemzeitintervall, um die beste Zeicheneffizienz aufrechtzuerhalten, und bietet eine bessere Optimierung, um die Animation flüssiger zu machen. // Nach der Browseroptimierung ist die Animation flüssiger. //Wenn das Fenster nicht aktiviert ist, wird die Animation gestoppt, um Rechenressourcen zu sparen; Animation(draw); } //Führen Sie hier nach 0,1 Sekunden einmal draw() aus. Der eigentliche Animationseffekt wird von window implementiert .requestAnimationFrame function() { draw( }, 100)} ();Quellcode-Adresse: https://github.com/jc1144096387/canvas_nest
ZusammenfassenDas Obige ist der vom Editor eingeführte Code zum Parsen der HTML5-Leinwand, um dynamische Hintergrundeffekte bei der Mausverbindung zu erzielen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten . Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!
Wenn Sie der Meinung sind, dass dieser Artikel für Sie hilfreich ist, können Sie ihn gerne erneut drucken. Bitte geben Sie die Quelle an. Vielen Dank!