最近研究了个叫AlloyTouch的东东，看到别人做的下拉刷新的时候有个超酷的loading效果——大波浪进度图，真是太赞了！所以我也想学着做看看。接下来我会分享如何使用Canvas画出这样的进度图的教程，还会告诉你要注意哪些细节。
Canvas基础：绘制矢量图
Canvas这个神器可以让我们玩转JavaScript在线涂鸦！如果你想画个炫酷的大波浪进度条，就得学会Canvas里如何绘制矢量图形！矢量图就是由点、线、块等元素构成的图像，不管怎么拉伸缩放都不会变得模糊。有了Canvas，各种形状都能轻松搞定，比如今天我们要学习的大波浪。
二次贝塞尔曲线：波浪的秘密
Canvas里的二次贝塞尔曲线简直太神奇了！只需给它三个点，就能轻松画出好看的线条。像我们进度图上的那些波动效果，其实就是这么弄出来的。随便动一下控制点，波浪形状立马会跟着变化，真是有趣又多样化。
globalCompositeOperation：叠加特效
Canvas这东西其实就用来画画滴，你知道globalCompositeOperation这个属性不？超级实用！特别是用在做那个波浪进度图时，用它来弄叠加效果就更酷了。比如说，变成destination-atop的话，原来的图形只会留下和新图形重合的部分，这样就有了一种很特别的视觉效果。
context.quadraticCurveTo(cpx,cpy,x,y);
图片素材的加载与绘制
记得用`newImage()`把你的图片素材请进来，然后放到Canvas上去搞事情。不过别急，记得矢量图要先画出来，之后再放上图片素材，这样最后的效果才会跟你一开始想的一样哈。
实战案例：一步步实现大波浪进度图
告诉你怎么搞定这个“大波浪”进度条~先学点HTML和JavaScript的基础知识；然后用CanvasAPI画出矢量图和照片。别忘了用上我们之前说过的二次贝塞尔曲线和globalCompositeOperation属性，这样就可以做出完美的波浪效果了！
ctx.moveTo(20,20); ctx.quadraticCurveTo(20,100,200,20); ctx.stroke();
注意事项：避免常见的陷阱
玩游戏时，总会遇到些小麻烦，如图案顺序颠倒啦、画质卡顿或者Canva不给力等问题都让人头疼。别急！只需掌握几招就能轻松解决，让你的游戏开发更加顺手。
总结：大波浪进度图，不仅仅是酷炫
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 可以看到无限运动的波浪：
这里需要主要，绘制的区域要比Canvas大来隐藏摇摆校正的图像，上面使用了200200的Canvas。
大家把代码clone下来可以试试把它绘制到一个大的Canvas上就可以明白。
这里通过if (-1 offset === d2) offset = 0;来实现无限循环。
d2就是一个波峰+波谷的长度。一个波峰+一个波谷之后又开始同样的生命周期和从0开始一样，所以可以重置为0。
了解globalCompositeOperation
globalCompositeOperation 属性说明了绘制到画布上的颜色是如何与画布上已有的颜色组合起来的。
绘制大波浪进度图会用到：
ctx.globalCompositeOperation = "destination-atop";
学了个超酷的东西！用canvas画大波浪进度条，太棒了！还发现了几个小技巧，可以让我们做的网页更有意思。这种进度图既好看又有个性，能帮网站大大提高吸引力！希望这个分享对你们有所启发，玩得开心，做出更美的效果哟~
互动环节：你的创意是什么？
快到最后了，跟你们聊聊啊：你们是怎么玩儿大波浪进度图的？有啥有趣的想法想法？到评论区分享一下这么多人能一起来讨论、学习多好；觉得今天的分享还行就给个赞再转发给小伙伴们，让他们也试试这牛逼的小技巧！
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";
评论0