Beispiel für einen coolen Big-Wave-Fortschrittsdiagrammeffekt mit HTML5 Canvas (mit Demo)

In diesem Artikel wird der coole Big-Wave-Fortschrittsdiagrammeffekt von HTML5 Canvas vorgestellt. Die Details lauten wie folgt:



Wie Sie im Bild oben sehen können, ist dieser Artikel um den oben genannten Effekt zu erzielen.

Weil AlloyTouch kürzlich einen coolen Ladeeffekt mit Pulldown-Aktualisierung schreiben muss. Daher wird das Fortschrittsdiagramm der großen Welle bevorzugt.

Zuerst müssen wir die Fortschrittskomponente der großen Welle kapseln. Das Grundprinzip besteht darin, mit Canvas Vektorgrafiken und Bildmaterialien zu zeichnen und Welleneffekte zu synthetisieren.

QuadraticCurveTo verstehen

Die quadraticCurveTo()-Methode fügt dem aktuellen Pfad einen Punkt hinzu, indem sie einen angegebenen Kontrollpunkt verwendet, der eine quadratische Bezier-Kurve darstellt.

JavaScript-Syntax:

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

Parameterwert

cpx Bezier-Kontrollpunkt Das x Koordinate

cpy Die y-Koordinate des Bezier-Kontrollpunkts

x Die x-Koordinate des Endpunkts

y Die y-Koordinate des Endpunkts

Zum Beispiel:

ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();

Eine quadratische Bezier-Kurve kann durch den obigen Code gezeichnet werden. Der spezifische Prinzipeffekt ist in der folgenden Abbildung zu sehen:



Versuchen Sie, Wellen zu zeichnen

var waveWidth = 300,
    offset = 0,
    waveHeight = 8,
    waveCount = 5,
    startX = -100,
    startY = 208,
    progress = 0,
    progressStep = 1,
    d2 = waveWidth / waveCount,
    d = d2 / 2,
    hd = d / 2,
    c = document.getElementById("myCanvas"),
    ctx = c.getContext("2d");

function tick() {
    offset -= 5;
    progress += progressStep;
    if (progress > 220 || progress < 0) progressStep *= -1;

    if (-1 * offset === d2) offset = 0;
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.beginPath();
    var offsetY = startY - progress;
    ctx.moveTo(startX - offset, offsetY);

    for (var i = 0; i < waveCount; i++) {
        var dx = i * d2;
        var offsetX = dx + startX - offset;
        ctx.quadraticCurveTo(offsetX + hd, offsetY + waveHeight, offsetX + d, offsetY);
        ctx.quadraticCurveTo(offsetX + hd + d, offsetY - waveHeight, offsetX + d2, offsetY);
    }
    ctx.lineTo(startX + waveWidth, 300);
    ctx.lineTo(startX, 300);
    ctx.fill();

    requestAnimationFrame(tick);
}

tick();

Sie können Wellen mit Unendlichkeit sehen Bewegung:



Wichtig ist hier, dass der Zeichenbereich größer als die Leinwand ist, um das Swing-Korrekturbild auszublenden. Oben wird die Leinwand von 200200 verwendet.

Sie können den Code klonen und versuchen, ihn auf einer großen Leinwand zu zeichnen, und Sie werden es verstehen.

Hier wird eine Endlosschleife durch if (-1 offset === d2) offset = 0; implementiert.

d2 ist die Länge eines Wellenbergs + Wellentals. Nach einem Wellenberg + einem Wellental beginnt der gleiche Lebenszyklus erneut, was dem Start bei 0 gleichkommt, also auf 0 zurückgesetzt werden kann.

Erfahren Sie mehr über globalCompositeOperation

Die Eigenschaft globalCompositeOperation beschreibt, wie auf die Leinwand gezeichnete Farben mit bereits auf der Leinwand vorhandenen Farben kombiniert werden.

Beim Zeichnen eines Big-Wave-Fortschrittsdiagramms wird Folgendes verwendet:

ctx.globalCompositeOperation = "destination-atop";

destination-atop Bedeutung: Der Inhalt, der sich bereits auf der Leinwand befindet, wird nur angezeigt Wo es mit der neuen Form überlappt, bleibt erhalten. Die neue Form wird nach dem Inhalt gezeichnet.

Natürlich verfügt globalCompositeOperation über viele Optionen, die hier nicht aufgeführt sind. Sie können versuchen, andere Eigenschaften festzulegen, um coole Overlay-Effekte anzupassen.

Gesamtimplementierung

var img = new Image();
function tick() {
    ...
    ...
    ctx.fill();
    ctx.globalCompositeOperation = "destination-atop";
    ctx.drawImage(img, 0, 0);
    requestAnimationFrame(tick);
}

img.onload = function () {
    tick();
};

img.src = "asset/alloy.png";

Um den Code einfach und direkt zu gestalten, ist dies nicht erforderlich Kapseln Sie hier einen Ladecode und legen Sie src direkt über new Image fest, um das Bild zu laden.

Legen Sie nach dem Zeichnen des Vektorbilds die globaleCompositeOperation fest und zeichnen Sie dann das Pinguinbild. Die Zeichenreihenfolge kann nicht verwechselt werden.

Endlich

Beispiel-Download: Demo

Das Obige ist der Inhalt des HTML5 Canvas-Beispiels für einen coolen Big-Wave-Fortschrittsdiagrammeffekt (mit Demo). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!