HTML5 canvas play cool big wave Progress Chart

2016-12-13 11:52 by "When Resistance", 1321 Read, 2 reviews, favorites, edit

As you can see, this article is to achieve the above effect.
Due to the recent alloytouch to write a drop-down refresh of the cool loading effect. So the big wave progress chart is preferred.
The first step is to encapsulate the big wave picture progress component. The basic principle is to use canvas to draw vector images and picture footage to synthesize wave effects.

The Code of this article you can find here https://github.com/AlloyTeam/AlloyTouch/blob/master/refresh/wave/image_wave.html.

About Quadraticcurveto

The Quadraticcurveto () method adds a point to the current path by using the specified control point that represents a two-time Bezier curve.

JavaScript Syntax:
Context.quadraticcurveto (Cpx,cpy,x,y);
Parameter values

• X-coordinate of the CPX Bezier control point
• cpy the y-coordinate of a Bezier control point
• X-coordinate of the X-end point
• Y-coordinate of the Y-end point

Such as:

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

The above code can draw a two-time Bezier curve, the specific principle effect to see:

Try to draw a wave

var wavewidth=300, offset=0, Waveheight=8, Wavecount=5, StartX=-100, Starty=208, Progress=0, Progressstep=1, D2= Wavewidth/wavecountD= D2/2, HD= d/2C=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+ d2 ; } ctx. LineTo (StartX + wavewidth300) ctx. lineto (Startx300) ctx. fill () requestanimationframe (tick) ;} tick () ;             

You can see the waves of infinite motion:

The main point here is to draw the area larger than the canvas to hide the swing correction image, which uses acanvas of 200.
Clone the code and try to draw it onto a large canvas to understand.
This is achieved by using the IF ( -1 offset = = = = D2) offset = 0 for an infinite loop.
D2 is the length of a crest + trough. A crest + A trough starts the same life cycle as starting with 0, so it can be reset to 0.

About Globalcompositeoperation

The Globalcompositeoperation property describes how the colors drawn to the canvas are combined with the colors already on the canvas.

Drawing a large wave progress chart will use:

ctx.globalCompositeOperation = "destination-atop";

Destination-atop meaning: What is already on the canvas will only remain where it overlaps with the new graphic. The new graphic is drawn after the content.

Of course, Globalcompositeoperation has a lot of options, not listed here, you can try to set other properties to adjust the cool overlay effects.

Overall implementation

var img=NewImage ();function Tick(){ ... ...CTx.Fill ();CTx.Globalcompositeoperation= "destination-atop" ctx. drawimage (Img00) requestanimationframe (tick) ;} img. onload =  Function () {tick () }; img. src =  "Asset/alloy.png"                

For the code to be straightforward, this eliminates the code that encapsulates a loader, and directly sets SRC from the new image to load the image.
After plotting the vectors, set the globalcompositeoperation, and then draw the Penguin pictures, the drawing order can not be mistaken.

At last

More examples of demos and code can be found on GitHub.
Github:https://github.com/alloyteam/alloytouch
Announcement: "Alloytouch big wave Refresh"

HTML5 canvas play cool big wave Progress Chart