前端百分比进度条怎么做_前端图形学（七）——Canvas实现个性化进度条

点击右上角的关注，不定期前端干货分享！！

你是否还在用CSS3动画做一些网上随处可见的loading动画呢？就像上面的图，作为一个前端工程师，loading动画怎么少得了Canvas呢？今天我就带着大家制作一个个性化的loading吧~

上一篇文章 前端图形学(六)——Canvas展现数学之美 的结尾说我们会结合三角函数实现一个个性化的进度条。说话算数，这就来了。效果如下。

今天要实现的最终效果

这个示例的灵感我是来自于腾讯课堂的loading图、长这个样儿，相信大家一定不陌生吧。

很清楚的可以看到这是一个gif

要实现这个个性化的loading ,我们首先得有相关的Canvas知识点。

像素合成

什么是像素的合成？不管是在传统的dom中，还是在Canvas中，绘制两个重叠的图形或者DOM元素叠加在一起。那么后面绘制的肯定是要压在前面绘制的图形或者dom上。

举例：

context.beginPath();context.arc(100,100,100,0,Math.PI*2,false);context.fillStyle = '#f90';context.fill();context.fillStyle = '#000';context.fillRect(100,100,160,160);

从图中我们可以看到，后绘制的矩形压在了先绘制的圆上，按照DOM的思维，我们可以理解为矩形的层级比圆的层级要大。这也是Canvas中默认的合成方式。

但是事实上在canvas中，有很多种的合成方式，设置合成方式的API为：

context.globalCompositeOperation = type

1. source-over,默认的合成方式。即，后绘制的在上面
2. destination-over，与source-over相反，后绘制的在下面

效果如图

3.source-atop (我们今天要实现的效果就会用到这个合成方式)

……

还有其它的合成方式，我这里就不一一介绍了，毕竟网上比我写的介绍好的文章一抓一大把。

我们上面的举例，全都是基于canvas图像来合成的，既然是像素的合成，那么对于普通的位图(图片)而言，内部其实也是像素，那我们接下来拿图片来开刀

我们先来绘制一张图片。然后再再绘制一个矩形，默认效果是这样的

矩形压在了图片上

毫无悬念，我们可以清楚的看到了矩形压在了图片的上面，接下来我设置合成看效果

设置合成方式之后，我们可以看到奇迹发生了....

到这来了，这已经和我们最终的效果很接近了。于是很容易就能想到，我们不能直接绘制矩形，而是要绘制我们昨天的大波浪效果。就是这个

然后把这个图形替换之前的矩形，得到的效果是这样的

正弦又出来浪了

然后我们再去让曲线动起来，我们今天的主要效果就完成了……，因为这是一个loading动画，那么肯定会有百分比的计算。也就是说我们要通过 [0~100]之间给波浪一个适当的高度即可。

波浪的高度的绘制我是通过context.translate()方法来实现的，整个的进度的计算结果我打印在了title中。整体的源代码如下：

核心代码我已标记出来

(需要源代码可私信我)

以上就是今天实现的效果。这里是【畅哥聊技术】前端图形学相关技术文章，更多精彩内容敬请关注。未完待续...