HTML5 Canvas Play Turning Cool Hyun's Big Wave Progressive Map Effect Effect (Affiliated DEMO)

This article introduces the effect of HTML5 Canvas to play cool dazzling big wave schedule, as follows:

As shown in the figure above, this article is to achieve the above effect.

Because Alloytouch recently wrote a cool and cool loading effect. So the preferred big wave progress map.

First of all, we must package the big wave picture progress component. The basic principle is to use Canvas to draw vector diagrams and picture materials to synthesize the wave special effect.

The QuadraticCurveto () method is used to add a point to the current path by using the specified control point of the second Bessel curve.

Javascript syntax:

 context.quadraticCurveto (CPX, CPY, X, Y);

X coordinate of CPX Bessel control point

CPY Bessel control point Y coordinate

X coordinates at the end point of x

Y hoods at the end point of y

like:

 ctx.moveto (20,20); ctx.quadraticcurveto (20,100,200,20); ctx.stroke ();

Through the above code, you can draw a second Bessel curve. The specific principles can be seen in the figure below:

 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.getContext (2D); function tick () {offset- = 5; progress += progresstep; Rogress <0) Progresstep *= - 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 officialx = dx+startx -offset; + HD, Offsety + Waveheight, Offsetx + d, Offsety); CTX.quadraticCurveto (Offsetx + HD + D, Offset -Waveheight, Offsetx + D2, Offsety); h, 300); CTX.Lineto (Startx, 300); CTX .fill (); RequestanimationFrame (tick);} tick ();

You can see the waves of infinite exercise:

The main needs here. The drawing area is larger than Canvas to hide the image corrected image, using the 200200 Canvas.

If you get the code clone, you can try to draw it to a large canvas.

Here, IF (-1 Offset === D2) offset = 0; to achieve unlimited circulation.

D2 is the length of a peak+valley. After a peak+a valley, the same life cycle began to start with the same life cycle as 0, so it can be reset to 0.

GlobalCompositeoperation Properties illustrate how the color drawn on the canvas is combined with the existing color on the canvas.

Draw a large wave progress diagram to be used:

 ctx.globalcompositeoperation = Destination -Top;

DestInation-ATOP Significance: The existing content on the canvas will only be retained where it overlaps with the new graphic. The new figure is drawn after the content.

Of course, there are many options for GlobalComPOSITEPRATION. It is not listed one by one. You can try to set other attributes to adjust the cool superimposed effect.

 var IMG = New Image (); Function Tick () {... ... ctx.fill (); ctx.globalcompositeoperation = Destination -Top; ctx.DrawImage (IMG, 0, 0); rame (tick);} img.Onload = Function () {tick ();}; img.src = asset/alloy.png;

In order to be simple and direct, here is the code that encapsulates a loader, and SRC is set directly through New Image to load the picture.

After drawing the vector diagram, set the GlobalCompositePrty, and then draw a penguin picture. The drawing order cannot be made wrong.

at last

Example download: DEMO

The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.