HTML5 Canvas is an example of the cool big wave Progress Chart (with demo), html5canvas

HTML5 Canvas is an example of the cool big wave Progress Chart (with demo), html5canvas

This article introduces the HTML5 Canvas progress chart, which is as follows:

As you can see, this article is to achieve the above effect.

Recently, AlloyTouch wants to write a cool loading effect for pull-down and refresh. Therefore, the big wave progress chart is preferred.

First, encapsulate the progress component of the big wave image. The basic principle is to use Canvas to draw a vector image and combine the image material to generate a special wave effect.

Learn more about quadraticCurveTo

The quadraticCurveTo () method adds a vertex to the current path by using a specified control point that represents the secondary besell curve.

JavaScript Syntax:

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

Parameter Value

X coordinate of cpx besell Control Point

Y coordinate of cpy besell Control Point

X coordinate of the end point

Y coordinate of y end point

For example:

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

Using the code above, you can draw a secondary besell curve. The specific principle is as follows:

Try to draw Waves

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

You can see the waves of infinite motion:

It is important to note that the area to be drawn is larger than that of the Canvas to hide the image for Swing correction. A Canvas of 200200 is used above.

You can clone the code and try to draw it on a large Canvas.

Here, we use if (-1 offset = d2) offset = 0; to implement an infinite loop.

D2 is the length of a peak + Valley. After a peak and a valley, the same lifecycle starts from 0, so it can be reset to 0.

Learn more about globalCompositeOperation

The globalCompositeOperation attribute shows how the color drawn to the canvas is combined with the existing color on the canvas.

You can use the following method to draw a large wave progress chart:

ctx.globalCompositeOperation = "destination-atop";

Destination-atop: The existing content on the canvas is retained only when it overlaps with the new image. The new image is drawn after the content.

Of course, there are many other options for globalCompositeOperation. Here we will not list them one by one. You can try setting other attributes to adjust the cool overlay effects.

Overall implementation

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

In order to make the code simple and direct, the code for encapsulating a loader is removed here, And the src is directly set through the new Image to load the Image.

After the vector graph is drawn, set globalCompositeOperation and then draw the penguin image. The order of drawing is correct.

Last

Download instance: demo

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.