Vor ein paar Tagen habe ich CSS-Stil und JS verwendet, um die ähnliche Schnittstelle von github404 zu würdigen. Gleichzeitig kam ich kürzlich mit der Idee in Berührung, herumzuspielen und den vorherigen JS-Algorithmus zu verwenden Verwenden Sie Canvas, um den dynamischen Effekt von Github404 zu vervollständigen.
Darstellungen
Dateiverzeichnis DateiressourcenDer Quellcode und die Bilder der Datei finden Sie am Ende des Artikels
CodeDer Hauptteil der Webseite
Definieren Sie hier die Breite und Höhe der Leinwand und legen Sie sie als Element auf Blockebene fest. Diese IMG-Tags laden diese Bilder, sodass wir sie nicht in js laden müssen, und dann die Bilder so einstellen, dass sie nicht angezeigt werden: display:none.
<body> <canvas id=mycanvas width=1680 height=630 style=margin:0;display:block> Ihr Browser unterstützt kein Canvas </canvas> <img src=./images/field.png style=display: none > <img src=./images/text.png style=display:none> <img src=./images/cat.png style=display:none> <img src=./images/cat_shadow.png style=display:none> <img src=./images/speeder.png style=display:none> <img src=./images/speeder_shadow. png style=display:none> <img src=./images/buliding_1.png style=display:none> <img src=./images/building_2.png style=display:none> </body>js Teil
1. Hier habe ich noch ein neues JSON-Objekt namens github404 erstellt, um alle Parameter und Methoden zu kapseln.
2. Erstellen Sie das imgData-Objekt erneut und übergeben Sie alle für img erforderlichen Parameter an ps:top und left zur Positionierung in der Methode drawImage(). Der Skalierungsparameter wird verwendet, um die entsprechende Bildbewegung zu berechnen, wenn sich die Maus bewegt.
3. Die Methode init() dient der Initialisierung und ist die Schnittstelle nach außen
4. Die Implementierung der Zeichenmethode besteht darin, eine for in-Schleife zu verwenden, um imgData[] zu durchlaufen, dann Werte nacheinander zuzuweisen und schließlich die Methode drawImage() zum Zeichnen zu verwenden. Sie müssen darauf achten, dass Sie zuerst die Methode ctx.clearRect() verwenden, um die Leinwand zu löschen.
<script> var github404 = { imgData: {//Zeichnen Sie die Informationen aller Bilder als JSON-Objekte auf bg: { top: 0, left: 110,//top und left werden zur Positionierung verwendet, verwenden Sie src: './ images/ field.png',//Skalierung des entsprechenden Bildpfads: 0,06,//Wenn sich die Maus bewegt, der Anteil der entsprechenden Bewegung des Bildes}, Building_2: { oben: 133, links: 1182, Quelle: './images/building_2.png', Maßstab: 0,05, }, Gebäude_1: {oben: 79, links: 884, Quelle: './images/building_1.png', Maßstab: 0,03,}, speeder_shadow : { top: 261, left: 776, src: './images/speeder_shadow.png', Maßstab: 0,01, }, cat_shadow: { top: 288, left: 667, src: './images/cat_shadow.png', Maßstab: 0,02, }, speeder: { top: 146, links: 777, Quelle: './images/speeder.png', Maßstab: 0,01, }, cat: { top: 88, left: 656, src: './images/cat.png', scale: 0.05, }, text: { top: 70, left: 364, src: './images/text ' .png', Scale: 0.03, }, }, rate_w: 0, rate_h: 0,//Offset-Verhältnis field_width: 1680, field_height: 370,//Hintergrundhöhe und -breite Canvas: document.querySelector('#mycanvas'),//Holen Sie sich das Canvas-Element init: function() {//Initialisieren Sie die Lademethode this.setRateWH(); placeImg( ); this.attachMouseEvent( }, setRateWH: function() {//Methode zur Berechnung des Offset-Verhältnisses var window_width = document.body.clientWidth; var window_height = document.body.clientHeight; this.rate_w = this.field_height/window_height; }, placeImg: function() {//Initialisierte Zeichenmethode = this.canvas.getContext('2d');//Geben Sie den Pinsel für(ein this.imgData){//Traverse das imageData-Objekt var image = new Image(); var left = this.imgData[key].left; var top = this.imgData[key].top; [ key].src; ctx.drawImage(image,left,top, image.width,image.height); document.body.onmousemove = function(e){ that.picMove(e.pageX,e.pageY); } }, picMove: function(pageX,pageY) {//Methode zum Neuzeichnen, wenn sich die Maus bewegt let ctx = this. canvas.getContext('2d'); ctx.clearRect(0,0,this.canvas.width,this.canvas.height); for(key in this.imgData) { var image = new Image(); var offer_w = this.rate_w * pageX * this.imgData[key].scale; var offer_h = this.rate_h * pageY * this.imgData[key].scale; /Definieren Sie links und oben und positionieren Sie die Parameter beim Zeichnen unten var left = this.field_width/100 - offer_w + this.imgData[key].left; this.field_height/100 - offer_h + this.imgData[key].top; image.src = this.imgData[key].src; } } window.onload = function() { // Rufen Sie nur die Init-Methode von github404 auf, um die Daten zu kapseln github404.init(); } </script> ZusammenfassenDieses Mal habe ich Canvas verwendet, um diesen dynamischen Effekt zu vervollständigen, wodurch ich mehr über die Verwendung von Canvas verstand. mach mich gleichzeitig
Ich habe ein tieferes Verständnis für die Verwendung von JSON-Objekten zum Kapseln von Daten und Methoden und für die Organisation von Code.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.