HTML5 -Leinwand spielen das Big Wave Progressive Map Map Map Effect von Cool Hyun (verbundene Demo).

本文介绍了HTML5 Canvas玩转酷炫大波浪进度图效果，具体如下：

如上图所见，本文就是要实现上面那种效果。

由于最近AlloyTouch要写一个下拉刷新的酷炫loading效果。所以首选大波浪进度图。

首先要封装一下大波浪图片进度组件。基本的原理是利用Canvas绘制矢量图和图片素材合成出波浪特效。

Die quadratische Methode () wird verwendet, um den Strompfad mit dem angegebenen Kontrollpunkt der zweiten Bessel -Kurve einen Punkt hinzuzufügen.

JavaScript -Syntax:

 context.quadraticcurveto (cpx, cpy, x, y);

X Koordinate des CPX -Bessel -Steuerpunkts

CPY Bessel Control Point Y -Koordinate

X Koordinaten am Endpunkt von x

Y Kapuzen am Endpunkt von y

wie:

 ctx.moveto (20,20);

Durch den obigen Code können Sie eine zweite Bessel -Kurve zeichnen.

 Var Wavewidth = 300, Offset = 0, WaveHeight = 8, WaveCount = 5, startx = -100, starty = 208, progress = 0, progreshTep = 1, d2 = Wavewidth / WeaveCount, = D2 / 2, HD = D / 2 c = document.getElementById (mycanvas), ctx = C.GetContext (2d); === D2) Offset = 0; für (var i = 0; i <weavecount; i ++) {var dx = i * d2; OffsetX + D, Offset -Waveheigh, OffsetX + D2, Offsety);

Sie können die Wellen unendlicher Bewegung sehen:

Der Hauptbedarf ist hier.

Wenn Sie den Code -Klon erhalten, können Sie versuchen, ihn auf eine große Leinwand zu ziehen.

Hier, if (-1 offset === d2) offset = 0;

D2 ist eine Peak+Valley -Länge. Nach einem Peak+A Valley begann der gleiche Lebenszyklus mit dem gleichen Lebenszyklus wie 0, sodass es auf 0 zurückgesetzt werden kann.

GlobalCompositeoperation -Eigenschaften veranschaulichen, wie die auf der Leinwand gezogene Farbe mit der vorhandenen Farbe auf der Leinwand kombiniert wird.

Zeichnen Sie ein großes Wellenfortschrittsdiagramm, das verwendet werden soll:

 ctx.globalcompositeoperation = destination -top;

Ziel-Atop-Bedeutung: Der vorhandene Inhalt auf der Leinwand wird nur dort beibehalten, wo sie sich mit der neuen Grafik überschneidet.新图形绘制于内容之后。

Natürlich gibt es viele Optionen für GlobalCompositepration.

var img = new Image (); img.onload = function () {tick ();};

Um einfach und direkt zu sein, ist hier der Code, der einen Loader zusammenfasst, und SRC wird direkt über neues Bild eingestellt, um das Bild zu laden.

Stellen Sie nach dem Zeichnen eines Vektordiagramms die GlobalCompositeoperation ein und zeichnen Sie dann ein Pinguin -Bild.

endlich

Beispiel Download: Demo

Das oben genannte ist der Inhalt dieses Artikels.