HTML5 lehrt Sie, coole Fragmente Bildschalter (Leinwand) zu machen

Alte Regeln wenden zuerst den Quellcode an. Der Bildbereich kann angeklickt werden und die Animation startet in der Position der Klickposition.

Ich habe diesen Effekt ursprünglich vor drei Jahren gemacht, aber es war mit unzähligen Div -Tags. Vor kurzem möchte ich einen großen Gott mit reinem CSS lernen, um einen CSS -Effekt zu lernen.

1. Bereiten Sie zunächst eine Reihe von Bildern der gleichen Größe vor. CSS). Um die Verwendung zu erleichtern, fügen Sie diese Bilder für die spätere Verwendung in ein verstecktes Element in HTML hinzu.

 <div class = 'hide'> <img class = 'img' src = './images/a.jpg'/> <img class = 'img' src = './images/b.jpg'/> <img class = 'img' src = './images/c.jpg'/> <img class = 'img' src = './images/d.jpg'/> <img class = 'img' src = './d.jpg'/> <img class = 'src ='. Bilder/e.jpg '/> </div>

 .Hide {display: keine;}

2. Setzen Sie eine Leinwand in HTML ein, und es wird durch die Größe bestimmt. Es muss jedoch sichergestellt werden, dass sie mit der Breite und Höhe der Bildressourcen übereinstimmt. Die Größe der Leinwand in diesem Beispiel beträgt 800 * 450.

 <canvas id = mycanvas width = 800 Höhe = 450> Ihr Browser unterstützt keine Leinwand </Canvas>

3. Der Grundcode ist wie folgt, zuerst das Kontextobjekt der Leinwand erhalten.

 var ctx = document.querySelector ('#mycanvas'). Schlaganfall ();

Ich glaube, dass viele Menschen nach dem Anschauen einer Kombination aus mehreren kleinen Einheiten nur für das Zeichnen eines kleinen Teils des Bildes verantwortlich sind.

Bevor Sie den Quellcode erläutern, überprüfen wir die Verwendung der Drawimage -Funktion in Leinwand. Da wir die 9 Parameter dieser Funktion verwenden müssen, gibt es viele Parameter und wir müssen das Bedeutung und das Referenzobjekt dieser Parameter berücksichtigen.

 Context.drawimage (IMG, SX, Sy, Swidtht, Sheight, X, Y, Breite, Höhe, Höhe);

· IMG: Das Bild, die Leinwand oder das Video, das verwendet wird, um verwendet zu werden

· SX: Die X -Koordinatenposition des Schneidens des Schneidens

· SY: Die Y -Koordinatenposition des Schneidens des Schneidens

· Swidth: Breite des Bildes des Schnittbildes

· SHEIGHT: Die Höhe des Bildes wurde geschnitten

· X: Platzieren Sie die X -Koordinatenposition des Bildes auf der Leinwand

Y: Platzieren Sie die Y -Koordinatenposition des Bildes auf die Leinwand

· Breite: Die Breite des Bildes, das Sie verwenden möchten

· Höhe: Die Höhe des Bildes, das Sie verwenden möchten

Ich glaube, selbst wenn die oben genannten Parameter aufgeführt sind, ist es bei der Entwicklung immer noch leicht zu inflalen. Hier sind Tipps für alle: Zusätzlich zum ersten IMG -Parameter gibt es 8 Parameter, von denen die Größenreferenz der ersten 4 Parameter die ursprüngliche Karte ist, dh 1920 * 1080;

Denken Sie an diese Formel, es ist nicht einfach, in Ohnmacht zu schwachen, wenn sie tatsächlich ist.

Die Aufteilung besteht darin, die Größe einer Einheit in der Leinwand festzulegen. . Die Anzahl der Konventionen ist nicht unbedingt die maximale Anzahl oder das Minimum der Teilung, da der übermäßige Effekt nicht blendend ist und die geringe Leistung unter Druck steht.

In diesem Beispiel wähle ich die Größe der 800 * 450 in diesem Beispiel 25 * 25 als Einheitsgröße hier, dh die gesamte Leinwand bestehen aus 32 * 18 in insgesamt 576 Zellen. Nachdem wir das Raster geteilt haben, müssen wir einige grundlegende Parameter -Ersatzes berechnen.

 Var imgw = 1920, Bilder der ursprünglichen Breite/Höhe imgh = 1080; I I I I I I I I I I I I I I I I I I I I = CONH /DH, // Einheit /Spaltennummer J = conw /dw; = imgh /i;

Die ersten drei Parametersätze werden von行数= 画布高度/ 单元格高度；列数= 画面宽度/ 单元格宽度vorgenommen.行数= 画布高度/ 单元格高度；列数= 画面宽度/ 单元格宽度. Wenn dies umgekehrt ist, wird es später gezwungen. Der letzte Satz von DW/DH ist eine Zellgröße, die das Originalbild vergrößert und umwandelt, das für spätere Anpassung Bilder verwendet wird.

In der Reihenfolge zeichnen wir zuerst die Zelle in der oberen linken Ecke. Weil sein原图裁切位置und画布摆放位置.

 Ctx.drawimage (IMG, 0, 0, DH, DH, 0, 0, DH);

Erfolgreich. Wie schreibe ich jetzt die zweite Zeile, wie schreibe ich das Bild in der dritten Spalte?

 var i = 2, j = 3;

Was hier leicht zu verwirren ist, ist, dass裁剪或摆放的横坐标为单元格宽度* 列号，纵坐标为单元格高度* 行号.

Aus Gründen der Bequemlichkeit wird eine reine Funktion für das Rendern verantwortlich.

 Funktion handledraw (img, i, j) {ctx.drawimage (img, dw*j, dh*i, dh, dw*j, dh*i, dh);}

Nachdem die Rendering -Methode eingekapselt wurde, wird das gesamte Bild durch die doppelten Zyklen von Zeilen und Säulen gerendert.

 ctx.beginPath (); ();

Perfekt ~. Tatsächlich ist der Kernteil dieses Schritts abgeschlossen. Denn zu diesem Zeitpunkt ist dieses Bild bereits mit Hunderten von Zellen kombiniert, und jeder kann ihm einen Animationseffekt mit der Vorstellungskraft von Tianma verleihen.

Bevor Sie Ihren Animationsalgorithmus teilen, lassen Sie mich Ihnen zeigen, was die falsche Schreibweise ist ~

Es ist ein bisschen cool ~

Lassen Sie uns meinen Animationsalgorithmus teilen. Wie wird der Effekt auf die Demo erreicht?

Da jede Zelle die Zahl (i, j) auf dem Raster der Leinwand bewertet hat. Ich hoffe, dass wir nach einer Koordinate (ich, j) alle Punkte rund um die Koordinaten von nah bis fern bekommen können. Das spezielle Bild unten, zu faul, um ein Bild zu machen ~

Zum Beispiel sind die Koordinaten (3, 3)

Es gibt 4 Punkte mit einem Abstand von 1 (2, 3), (3, 4), (4, 3), (3, 2) insgesamt;

Es gibt Punkte mit einem Abstand von 2 (1, 3), (2, 4), (3, 5), (4, 4), (5, 3), (4, 2), (3, 1). (2), (2) 2) Insgesamt gibt es 8;

..........

Es ist auch leicht, den Algorithmus dieser Punktereihe zu finden, da行号差值的绝对值+ 列号差值的绝对值= 距离, dem spezifischen:

 Funktionsgröße (i, j, dst) {var Resarr = []; ); ;}}} Return Resarr;}

Diese Funktion wird verwendet, um eine bestimmte Koordinate und Entfernung (DST) zu ergeben und alle Punkte auf der Entfernung um die Koordinaten zu finden, um in Form eines Arrays zurückzukehren. Der obige Algorithmus hat jedoch weniger Grenzbeschränkungen wie folgt:

 Countaround (i, j, dst) {var Resarr = []; ; n <= (j+dst); = (i i -1) && n <= (j -1)) {Resarr.push ({x: m, y: n});}}} return Resarr;}

Auf diese Weise haben wir eine reine Funktion, die alle Punkte auf der umgebenden festen Entfernung berechnet und dann beginnt, das Animationsrendern zu vervollständigen.

Schreiben Sie zuerst eine Löschfunktion, um den Inhalt der Zelle zu löschen.

 Handleclear (i, j) {ctx.clearrect (dw*j, dh*i, dw, dh);}

Ein weiteresImg ist das nächste Bild und zeichnet schließlich ein neues Bild in die äußere Ebene durch setInterval, um den fragmentierten Gradienteneffekt zu vervollständigen.

 Var dst = 0, intervalbj = setInterval (function () {var Resarr = Countaround (i, j, dst); Resarr.foreach (InsertM, Index) {HandleClear (item.x, item. Y); Handledraw (ein weiteres IMG -Element. x, item.y);});

Wenn die von der Grafarie zurückgegebene Länge des Arrays 0 beträgt, dh alle Punkte am Koordinatenpunkt außerhalb der Grenze liegen und der Timerzyklus gestoppt wird. Zu diesem Zeitpunkt wurde der gesamte Kerncode eingeführt.

Gegenwärtig können alle Koordinaten auf einer bestimmten Leinwand den fragmentierten Bildumschalteffekt von diesem Punkt bis zur Umgebung verteilen.

Starten Sie bei automatischer Rotation die Animation von den voreingestellten 8 Punkten (vier Ecken und den Mittelpunkt von vier Seiten).

 var randompoint = [{x: 0, y: 0}, {x: i -1, y: 0}, {x: 0, y: j -1}, {x: i -1, y: j -1 }, {x: 0, y: math.ceil (j / 2)}, {x: i -1, y: math.ceil (j / 2)}, {x: math.ceil (i / 2), y: 0}, {x: math.ceil (i / 2), y: j -1}]

Beim Klicken werden die Klicks berechnet und starten die Animation vom Punkt.

 Funktion HandleClick (e) {var offsetx = e.Offsetx, Officey = E.Offsety, j = math.floor (Offsetx / dw), i = math.floor (Offsety / dh), // mit i, j, starten Animation beginnen ...},

Gegenwärtig ist dieser Effekt nur eine Demo -Phase.

Das oben genannte ist der Inhalt dieses Artikels.