Exemple d'effet de graphique de progression de grande vague utilisant HTML5 Canvas (avec démo)

Cet article présente l'effet cool de graphique de progression Big Wave de HTML5 Canvas, les détails sont les suivants :



Comme vous pouvez le voir dans l'image ci-dessus, cet article est pour obtenir l'effet ci-dessus.

Parce qu'AlloyTouch a récemment besoin d'écrire un effet de chargement sympa avec une actualisation déroulante. Par conséquent, le tableau de progression des grandes vagues est préféré.

Tout d’abord, nous devons encapsuler le composant de progression de l’image des grandes vagues. Le principe de base est d'utiliser Canvas pour dessiner des graphiques vectoriels et des images afin de synthétiser les effets de vagues.

Comprendre quadraticCurveTo

La méthode quadraticCurveTo() ajoute un point au chemin actuel en utilisant un point de contrôle spécifié qui représente une courbe de Bézier quadratique.

Syntaxe JavaScript :

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

Valeur du paramètre

cpx Point de contrôle Bézier Le x coordinate

cpy La coordonnée y du point de contrôle de Bézier

x La coordonnée x du point final

y La coordonnée y du point final

Tels que :

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

Une courbe de Bézier quadratique peut être tracée à l'aide du code ci-dessus. L'effet principal spécifique peut être vu dans la figure ci-dessous : <🎜. >



Essayez de dessiner des vagues

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();

Vous pouvez voir le mouvement infini de la vague :



Ce qui est important ici c'est que la zone de dessin soit plus grande que le Canvas pour cacher l'image de correction du swing. Le Canvas de 200200 est utilisé ci-dessus.

Vous pouvez cloner le code et essayer de le dessiner sur un grand Canvas et vous comprendrez.

Ici, une boucle infinie est implémentée via if (-1 offset === d2) offset = 0;.

d2 est la longueur de la crête et du creux d'une vague. Un pic et un creux sont suivis du même cycle de vie qu'à partir de 0, il peut donc être réinitialisé à 0.


En savoir plus sur globalCompositeOperation
La propriété globalCompositeOperation décrit comment les couleurs dessinées sur le canevas sont combinées avec les couleurs déjà présentes sur le canevas.

Dessiner un tableau de progression de grande vague utilisera :

ctx.globalCompositeOperation = "destination-atop";

sens destination-au sommet : le contenu déjà sur la toile ne sera que Là où il chevauche la nouvelle forme, il est conservé. La nouvelle forme est dessinée après le contenu.

Bien sûr, globalCompositeOperation propose de nombreuses options, qui ne sont pas répertoriées ici. Vous pouvez essayer de définir d'autres propriétés pour ajuster les effets de superposition sympas.


Implémentation globale

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";

Afin de rendre le code simple et direct, il n'est pas nécessaire de encapsulez un code de chargeur ici, définissez src directement via la nouvelle image pour charger l'image.

Après avoir dessiné l'image vectorielle, définissez la globalCompositeOperation, puis dessinez l'image du pingouin. L'ordre de dessin ne peut pas être erroné.

Enfin

Exemple de téléchargement : démo