使用腾讯 AlloyTeam.js 插件打造波浪加载进度条

最近使用 腾讯的AlloyTeam移动Web触摸解决方案实现了一款基于 HTML5 Canvas的加载进度条案例，这里分享给大家，希望能对各位在开发和学习过程中有所帮助。

最近 AlloyTouch 写了一个下拉刷新的酷炫 loading 效果。所以首选大波浪进度图。
首先要封装一下大波浪图片进度组件。基本的原理是利用 Canvas 绘制矢量图和图片素材合成出波浪特效。
相关代码可以在这里 https://github.com/AlloyTeam/AlloyTouch/blob/master/refresh/wave/image_wave.html 下载

运行效果

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 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，然后再绘制企鹅图片，绘制顺序不能搞错。

： » 使用腾讯 AlloyTeam.js 插件打造波浪加载进度条