La toile HTML5 joue à l'effet d'effet de carte progressif de la grande vague de Hyun de Hyun (démo affilié)

Cet article présente l'effet du canevas HTML5 pour jouer un programme cool éblouissant de grandes vagues, comme suit:

Comme le montre la figure ci-dessus, cet article est d'atteindre l'effet ci-dessus.

Parce qu'AlloyTouch a récemment écrit un effet de chargement cool et cool. Ainsi, le tableau de progression de Big Wave préféré.

Tout d'abord, nous devons emballer le composant Big Wave Picture Progress. Le principe de base consiste à utiliser la toile pour dessiner des diagrammes vectoriels et des matériaux d'image pour synthétiser l'effet spécial des vagues.

La méthode quadraticcurveto () est utilisée pour ajouter un point au chemin actuel en utilisant le point de contrôle spécifié de la deuxième courbe de Bessel.

Syntaxe JavaScript:

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

X Coordonnée du point de contrôle CPX Bessel

CPY Bessel Control Point Y coordonnées

X coordonne au point final de x

Y cagoules au point final de y

comme:

 CTX.Moveto (20,20);

Grâce au code ci-dessus, vous pouvez dessiner une deuxième courbe de Bessel.

 Var Wavewidth = 300, Offset = 0, WaveHeight = 8, wavecount = 5, startx = -100, starty = 208, progress = 0, progresstep = 1, d2 = wavewidth / wavecount, = d2 / 2, hd = d / 2 , c = document.getElementById (myCanvas), ctx = c.getConted (2d); === D2) Offset = 0; pour (var i = 0; i <wavecount; i ++) {var dx = i * d2; var officiel = dx + startx -offset; Offsetx + HD + D, Offset -WaveHeight, Offsetx + D2, Offsety); H, 300);

Vous pouvez voir les vagues de l'exercice infini:

Les principaux besoins ici.

Si vous obtenez le clone de code, vous pouvez essayer de le dessiner sur une grande toile.

Ici, if (-1 offset === D2) offset = 0; pour atteindre une circulation illimitée.

D2 est un pic + la longueur de la vallée. Après un pic + une vallée, le même cycle de vie a commencé à commencer par le même cycle de vie que 0, il peut donc être réinitialisé à 0.

Les propriétés de GlobalCompositeOperation illustrent comment la couleur dessinée sur la toile est combinée avec la couleur existante sur la toile.

Dessinez un grand diagramme de progrès des ondes à utiliser:

 ctx.globalCompositeOperation = Destination -Top;

Importance de destination-ATOP: le contenu existant sur la toile ne sera conservé que lorsqu'il chevauche le nouveau graphique. La nouvelle figure est dessinée après le contenu.

Bien sûr, il existe de nombreuses options pour GlobalCompositEpration.

 var img = nouvelle image (); img.onload = function () {tick ();};

Pour être simple et direct, voici le code qui résume un chargeur, et SRC est défini directement via une nouvelle image pour charger l'image.

Après avoir dessiné un diagramme vectoriel, définissez le GlobalCompositeOperation, puis dessinez une image de pingouin.

enfin

Exemple de téléchargement: démo

Ce qui précède est tout le contenu de cet article.