Canvas实现波纹进度图（附demo）--百分百源码网

Canvas实现波纹进度图（附demo）-

发布时间：08/01 来源：未知浏览：关键词：

这次给大家带来Canvas实现波纹进度图（附demo），Canvas实现波纹进度图的注意事项是什么，下面就是实战案例，一起来看一下。这次给大家带来Canvas实现波纹进度图（附demo），Canvas实现波纹进度图的注意事项是什么，下面就是实战案例，一起来看一下。

本文介绍了HTML5 Canvas玩转酷炫大波纹进度图结果，概括如下：

如上图所见，本文就是要实现上面那种结果。

因为比来AlloyTouch要写一个下拉刷新的酷炫loading结果。所以首选大波纹进度图。

第一要封装一下大波纹图片进度组件。根本的道理是应用Canvas绘制矢量图和图片素材合成出波纹特效。

理解quadraticCurveTo

quadraticCurveTo() 办法通过运用表示二次贝塞尔曲线的指定控制点，向目前途径增加一个点。

JavaScript 语法：

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

参数值

cpx 贝塞尔控制点的 x 坐标

cpy 贝塞尔控制点的 y 坐标

x 完毕点的 x 坐标

y 完毕点的 y 坐标

如：

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

通过上面代码可以绘制一条二次贝塞尔曲线，概括道理结果看下图：

尝试绘制波纹

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

可以看到无穷运动的波纹：

这里需要主要，绘制的区域要比Canvas大来隐蔽摇荡校订的图像，上面运用了200200的Canvas。

大家把代码clone下来可以试试把它绘制到一个大的Canvas上就可以明确。

这里通过if (-1 offset === d2) offset = 0;来实现无穷轮回。

d2就是一个波峰+波谷的长度。一个波峰+一个波谷之后又开端一样的生命周期和从0开端同样，所以可以重置为0。

理解globalCompositeOperation

globalCompositeOperation 属性注明了绘制到画布上的色彩是怎样与画布上已有的色彩组合起来的。

绘制大波纹进度图会用到：

ctx.globalCompositeOperation = "destination-atop";

destination-atop意义：画布上已有的内容只会在它和新图形重叠的地方保存。新图形绘制于内容之后。

固然，globalCompositeOperation还有许多选项，这里纷歧一列举，大家可以试试设定其他的属性来调整出很酷炫的叠加特效。

整体实现

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

为了代码简略直接，这里免去了封装一个加载器的代码，直接通过new Image来设定src来加载图片。

在绘制完矢量图之后，设定globalCompositeOperation，然后再绘制企鹅图片，绘制次序不克不及搞错。

最后

实例下载：demo

信赖看了本案牍例你已经把握了办法，更多出色请关注百分百源码网其它相干文章！

举荐浏览：

分页查询的运用详解

字符与数学函数之间的关系

以上就是Canvas实现波纹进度图（附demo）的细致内容，更多请关注百分百源码网其它相干文章！

打赏