canvas高效绘制10万图形,你必须知道的高效绘制技巧
最近的一个客户项目中，简化的需求是绘制按照行列绘制很多个圆圈。需求看起来不难，上手就可以做,写两个for循环。
原始绘制方法
首先定义了很多Circle对象，在遍历循环中调用该对象的draw方法。代码如下：
for (var i = 0; i < column; i++) {
for (var j = 0; j < row; j++) {
var circle = new Circle({
x: 8 * i + 3,
y: 8 * j + 3,
radius: 3
})
box.push(circle);
}
}
console.time(time);
for (var c = 0; c < box.length; c++) {
var circle = box[c];
circle.draw(ctx);
}
console.timeEnd(time);
结果绘制出了按照行列排布的很多个圆圈了，如下图所示：
原始方法绘制很多圆圈恩，很简单嘛，可以回家睡觉了。
等等，客户要求绘制的极限是10万个，而且每次绘制不能卡顿。先看下绘制10万个圆圈的时间是多久，用console.time 统计绘制时间：console.time(time);
// 实际绘制的代码
console.timeEnd(time);
时间显示为几百毫秒（3到4百毫秒），如下图所示：
绘制时间
几百毫秒的绘制时间，必然是卡顿的。想要流畅操作，肯定还的优化。
批量绘制
首先想到的是批量绘制，前面的代码中，每次变数都会调用circle.draw(ctx)方法，circle.draw方法代码如下：
draw: function (ctx) {
ctx.save();
ctx.lineWidth=this.lineWidth;
ctx.strokeStyle=this.strokeStyle;
ctx.fillStyle=this.fillStyle;
ctx.beginPath();
this.createPath(ctx);
ctx.stroke();
if(this.isFill){ctx.fill();}
ctx.restore();
},
可以看出 每次遍历都调用了一次beginPath和stroke方法。为了提高绘制效率，我们可以只调用beginPath和stroke方法一次，把所有的子路径组织成为一个大的路径，这就是所谓的批量绘制思路，代码如下：
console.time(time);
ctx.beginPath();
for (var c = 0; c < box.length; c++) {
var circle = box[c];
ctx.moveTo(circle.x + 3, circle.y);
circle.createPath(ctx);
}
ctx.closePath();
ctx.stroke();
console.timeEnd(time);
调试发现，确实效率有了很大的提升，时间减少到100毫秒左右，相当于效率提高了3-4倍左右，如下图所示：
批量绘制时间
。
需要注意的是上述代码中的moveTo语句：
ctx.moveTo(circle.x + 3, circle.y);
这是因为： 当使用arc方法给路径中添加子路径的时候，arc所定义的路径会自动和路径集合中的最后一个路径连接起来，如下图所示：
arc定义的路径自动连接起来此处的moveTo就是为了避免这种连接。
注意：arc 和arcTo都会有上述问题，但是rect定义的路径却不存在这种问题。
Pattern 方式
通过以上优化，客户已经觉得效率挺不错了。 但是技术研究没有止境，由于这个分布很规律，总感觉有更加快速的方法。最终突发灵感想到了一种方法，就是使用canvas 的Pattern功能：
canvas的fillStyle可以指定为一个pattern对象，而pattern可以实现一个简单图像的平铺。基于这种思路，我们可以实现如下代码：
var tempCanvas = document.createElement(canvas);
var ctx2 = tempCanvas.getContext(2d);
var w = 5,h = 5;
tempCanvas.width = w;
tempCanvas.height = h;
dpr(tempCanvas);
ctx2.fillStyle = red;
ctx2.arc(w/2,h/2,w/2 - 1,0,Math.PI * 2);
ctx2.stroke();
ctx.save();
ctx.beginPath();
var width = tempCanvas.width * 500,height = tempCanvas.height * 200;
var pattern = ctx.createPattern(tempCanvas, repeat);
ctx.clearRect(100,100,width,height);
ctx.rect(100,100,width,height);
ctx.fillStyle = pattern;
ctx.fill();
ctx.restore();
代码首先定义一个小的canvas，命名为tempCanvas，在tempCanvas上面绘制一个圆，需要注意的是tempCanvas的尺寸要设置为正好绘制下这个圆圈。
然后通过通过tempCanvas创建pattern对象，并把canvas的绘制上下文ctx的fillStyle指定为该pattern对象。
之后通过rect方法指定要fill的区域大小，改区域大小应该是所有最终要绘制的圆圈的大小的总和：var width = tempCanvas.width * 500,height = tempCanvas.height * 200;最后调用画笔的fill方法，用tempCanvas填充区域。最终绘制的效果和绘制消耗的时间如下图所示：
Canvas Pattern 方式绘制10万个圆
通过上图可以看出，效率极高，可以达到零点几毫秒的级别。
新的需求
如果客户需求只是这么简单，相信使用canvas pattern对象这种方式，效率是最高的。但是，客户的实际需求是，先绘制10万个的圆圈，然后可以用擦除工具，擦除一些区域的圆圈，如下图所示：
擦除后的效果原始绘制方法和批量绘制方法要是实现上述效果，都很容易，只要把不需要绘制圆圈的位置，直接忽略掉即可以。
比如用一个map记录需要忽略的圆圈的坐标，遍历的时候判断在map记录中的地方就直接跳过不进行绘制操作。
canvas pattern + 裁剪
如果是canvas pattern的方式，应该怎么实现上图的效果呢？ 经过思索发现可以通过ctx.clip方法。
clip，裁剪。如果通过ctx.clip定义了裁剪区域，绘制的图形只会在裁剪区域的部分显示出来，裁剪区域之外的，则不会显示。
没一个圆圈都会占用一个矩形区域，本案例中，可以把要显示的的圆圈所占的矩形区域都定义到裁剪区域里面，而不要显示的圆圈的矩形区域则排除到裁剪区域之外，如下图所示，绘制圆圈的矩形区域用实线表示出来，不绘制圆圈的区域用虚线表示:
裁剪区域只需要把所有实线表示的矩形区域都添加到要clip的路径中去，然后调用fill方法，则只会在实现定义的矩形区域显示出来圆圈。以下是示例代码：
for(var i = 0;i < 400; i ++){
for(var j = 0;j < 400;j ++){
var r = Math.random();
if(r <0.2){
templateMap[i+":" + j] = true;
continue;
}
var x = 10 + j * tempCanvas.width;
var y = 10 + i * tempCanvas.height;
var rect = {
x : x,
y : y,
width : tempCanvas.width,
height:tempCanvas.height
};
ctx.rect(rect.x,rect.y,rext.width,rect.height);
}
ctx.clip();
首先遍历所有的圆圈坐标，为了演示效果，用Math.random为了模拟随机产生一个数，如果这个数小于0.2，则当前圆圈的矩形区域不会被加入裁剪区域，也就是该圆圈不会显示出来。
通过上面裁剪操作后，「擦除后的效果」算是实现了。但是，经过测试，性能却低回去了，为什么，因为增加了很多rect操作。测试下来，一幁的绘制时间大概在80多毫秒，比批量绘制还是高一点，但是感觉还是不够好。Pattern + 合并裁剪
观察上面 「裁剪区域」 这个图，以第一行为例，第一、第二、第三个矩形区域是连在一块的，完全没有必要调用三次ctx.rect方法，而是先用演算法把三个区域合并为一个矩形区域，然后调用一次ctx.rect方法即可，如下图：
合并裁剪区域下面是合并裁剪区域的演算法，目前只是实现了同一行的合并，更加优化的合并演算法并没有实现，代码如下：
function calRectMap (tempCanvas){
if(rectMap != null){
return;
}
rectMap = rectMap || [];
for(var i = 0;i < 400; i ++){
for(var j = 0;j < 400;j ++){
var r = Math.random();
if(r <0.2){
templateMap[i+":" + j] = true;
continue;
}
var x = 10 + j * tempCanvas.width;
var y = 10 + i * tempCanvas.height;
var rect = {
x : x,
y : y,
width : tempCanvas.width,
height:tempCanvas.height
};
lineRectMap[i] = lineRectMap[i] || [];
lineRectMap[i][j] = rect;
}
unionLineRects(lineRectMap[i],rectMap);
}
}
function unionLineRect(rect1,rect2){
return {
x: rect1.x,
y : rect1.y,
width:rect1.width + rect2.width,
height:rect1.height
}
}
function unionLineRects(lineRectMap,rectMap){
var lastRect = null,lastNotNullIndex = null;
for(var j = 0;j < 400;j ++){
var currentRect = lineRectMap[j];
if(lastRect == null){
lastRect = currentRect;
}else{
if( lastNotNullIndex == j - 1 && currentRect){
lastRect = unionLineRect(lastRect,currentRect);
}
}
if(currentRect != null){
lastNotNullIndex = j;
}else if (lastRect){
rectMap.push(lastRect);
lastNotNullIndex = null;
lastRect = null;
}
}
if(lastRect){
rectMap.push(lastRect);
}
}
相关合并的演算法，此处不再详细说明。 合并之后，测试绘制的时间降低到了10几毫秒，算是比较好的绘制效果了：
合并裁剪之后的绘制
webgl绘制
由于笔者本人也长期研究webgl的技术，所以尝试著用webgl实线了2d的绘制，相关细节不在此处赘述，后面会写专门的文章如何用webgl绘制2d图形。最终测试的效率不是很理想，差不多100多毫秒，和上面的批量绘制差不多。 因为用webgl绘制，单次的绘制效率应该不会太差，但是由于需要遍历调用10万次绘制命令，必然效率不高。另外webgl绘制的效果其实是没有2d绘制的效果好的，锯齿严重。 要实现好的效果，还需要引入去锯齿相关技术。 绘制的效果如下：
webgl绘制用webgl绘制2d图形的相关主题，回头会另外写一篇文章介绍。敬请关注。
webgl2绘制
webgl2 引入了实例化数组，通过这个功能，可以实现把很多次的绘制调用合并为一个绘制调用，这会极大提高绘制效率。
有关实例化数组的功能，参考https://www.jianshu.com/p/d40a8b38adfe
绘制10万个圆形的效率大概在每帧零点零几毫秒，简直就是大boss级别的快，如下图：
WebGL实例化数组绘制
后记
通过这篇文章，除了想给读者传递相关知识点之外，其实还想表达一个观点：
相比于知识点，程序员更加需要锻炼的是底层思维能力。在我看来，底层思维能力包括：学习力、创造力、判断力和思考力。而勤于思考的人，不拘泥于司空见惯，都能够从日常枯燥的任务中发现很多有趣的东西，启发更多深入的思路。勤于思索是很重要的。 知识是死的，人是活的，同样的知识点，在思考力强的人手上，就能延伸出很多好的解决方案。这就要求人勤于探索，不要满足于把任务完成，而是要多深入思考，多总结，探索更多的方案和可能性。这本身有助于锻炼思考力和创造力，而思考力和创造力又会反过来帮助你解决更多的问题。其实IT行业的知识更新越来越快，能够以不变应万变的人，就是拥有良好的学习力、创造力、判断力和思考力的人。这些能力会让你在变换万千的技术海洋中，屹立不倒，不被淹没。
当然，标书可能有点好为人师了。 在日常的工作中，彪叔更喜欢做的事情，就是启迪下属的思考，而不仅仅是某个问题的解决方案。这是比学习知识更加重要的素质。彪叔也会在我的其他文章中，分享底层能力的相关认知。有兴趣的猿们可以关注彪叔的公号：ITman彪叔
欢迎关注公众号：ITman彪叔
推荐阅读：
