Example of cool big wave progress chart effect using HTML5 Canvas (with demo)

This article introduces the cool big wave progress chart effect of HTML5 Canvas, the details are as follows:



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

Because AlloyTouch recently needs to write a cool loading effect with pull-down refresh. Therefore, the large wave progress chart is preferred.

First of all, we need to encapsulate the big wave picture progress component. The basic principle is to use Canvas to draw vector graphics and picture materials to synthesize wave effects.

Understanding quadraticCurveTo

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

JavaScript syntax:

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

Parameter value

cpx x of Bezier control point Coordinates

cpy The y coordinate of the Bezier control point

x The x coordinate of the end point

y The y coordinate of the end point

For example:

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

A quadratic Bezier curve can be drawn through the above code. The specific principle and effect can be seen in the figure below:



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 waves with infinite motion:



What is needed here is that the drawing area is larger than the Canvas to hide the swing correction image. The Canvas of 200200 is used above.

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

The infinite loop is implemented here through if (-1 offset === d2) offset = 0;.

d2 is the length of a wave peak + wave trough. After a wave peak + a wave trough, the same life cycle starts again and starts from 0, so it can be reset to 0.

Understanding globalCompositeOperation

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

Drawing a big wave progress chart will use:

ctx.globalCompositeOperation = "destination-atop";

destination-atop Meaning: The content already on the canvas will only be added to it and Where the new graphics overlap is preserved. The new shape is drawn after the content.

Of course, globalCompositeOperation has many options, which are not listed here. You can try setting other properties to adjust 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, there is no need to encapsulate a loader code here, directly Use new Image to set src to load images.

After drawing the vector image, set globalCompositeOperation, and then draw the penguin image. The drawing order cannot be mistaken.

Finally

Example download: demo

The above is the content of the HTML5 Canvas cool big wave progress chart effect example (with demo), For more related content, please pay attention to the PHP Chinese website (www.php.cn)!