关闭

canvas高效绘制10万图形,你必须知道的高效绘制技巧

时间: 2018-11-25阅读: 1237标签: canvas

最近的一个客户项目中,简化的需求是绘制按照行列绘制很多个圆圈。需求看起来不难,上手就可以做,写两个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所定义的路径会自动和路径集合中的最后一个路径连接起来,如下图所示:


此处的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万个的圆圈,然后可以用擦除工具,擦除一些区域的圆圈,如下图所示:

原始绘制方法和批量绘制方法要是实现上述效果,都很容易,只要把不需要绘制圆圈的位置,直接忽略掉即可以。

比如用一个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绘制的效果好的,锯齿严重。 要实现好的效果,还需要引入去锯齿相关技术。 绘制的效果如下:



webgl2绘制

webgl2 引入了实例化数组,通过这个功能,可以实现把很多次的绘制调用合并为一个绘制调用,这会极大提高绘制效率。

有关实例化数组的功能,参考https://www.jianshu.com/p/d40...

绘制10万个圆形的效率大概在每帧零点零几毫秒,简直就是大boss级别的快,如下图:



后记

通过这篇文章,除了想给读者传递相关知识点之外,其实还想表达一个观点:
相比于知识点,程序员更加需要锻炼的是底层思维能力。在我看来,底层思维能力包括:学习力、创造力、判断力和思考力。而勤于思考的人,不拘泥于司空见惯,都能够从日常枯燥的任务中发现很多有趣的东西,启发更多深入的思路。
勤于思索是很重要的。 知识是死的,人是活的,同样的知识点,在思考力强的人手上,就能延伸出很多好的解决方案。
这就要求人勤于探索,不要满足于把任务完成,而是要多深入思考,多总结,探索更多的方案和可能性。这本身有助于锻炼思考力和创造力,而思考力和创造力又会反过来帮助你解决更多的问题。

其实IT行业的知识更新越来越快,能够以不变应万变的人,就是拥有良好的学习力、创造力、判断力和思考力的人。这些能力会让你在变换万千的技术海洋中,屹立不倒,不被淹没。

当然,标书可能有点好为人师了。 在日常的工作中,彪叔更喜欢做的事情,就是启迪下属的思考,而不仅仅是某个问题的解决方案。这是比学习知识更加重要的素质。彪叔也会在我的其他文章中,分享底层能力的相关认知。有兴趣的猿们可以关注彪叔的公号:ITman彪叔


原文来源:https://segmentfault.com/a/1190000017133772
作者:彪叔


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1417

canvas的getImageData和toDataUrl跨域问题

背景是这样的,母亲节的时候,我们有个需求就是用户可以长按或者点击一个按钮进行截图后去分享我们的活动,然而我们的图片例如头像,采用又拍云做 cdn 优化,所以意味着图片的链接跟主页面所在域名不一样

谈谈图片上传及canvas压缩的流程

我们通常在做图片上传的时候都会遇上这样的情况,一是后端接口限制上传图片的大小,或者是即使后端没有限制大小,因为图片太大在前端渲染时太慢,造成页面加载体验较差。因此我们很有必要对上传的图片进行压缩。

javascript实例教程:使用canvas技术模仿echarts柱状图

canvas 画布是HTML5中新增的标签,可以通过js操作 canvas 绘图 API在网页中绘制图像。百度开发了一个开源的可视化图表库ECharts,功能非常强大,可以实现折线图、柱状图、散点图、饼图、K线图、地图等多种图表。

Vue用Canvas生成二维码合成海报并解决清晰度问题

用文字和图片合成一个海报,用于活动结尾页在微信长按分享,接到需求的第一时间,我就想到用 canvas 来画,但是看到 canvas 繁琐的绘制过程,此篇文章主要记录下实现过程,以及遇到的问题。

HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图

Canvas 是H5的一部分,允许脚本语言动态渲染图像。Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网页上渲染动态效果图。

小程序中canvas实现水平、垂直居中

最近做一个刮刮卡,需要将文字在canvas中水平、垂直居中;fillText方法为canvas设置文本方法,使用如下所示;上例将文本内容设置在canvas画布的坐标位置上,跳脱web的开发思维,我们可以认为X点相对于文本有左

浅谈使用canvas绘制多边形

本文主要使用坐标轴的使用来绘制多边形,点位则都是在y轴上寻找,这种方法能够更好的理解图形与修改。id为html里canvas标签的属性id;x,y为坐标轴的起始位置,因为canvas默认坐标轴在左上角

利用canvas实现转盘抽奖

最近工作中重构了抽奖转盘,给大家提供一个开发转盘抽奖的思路;由于业务需要所以开发了两个版本抽奖,dom和canvas,不过editor.js部分只能替换图片,没有功能逻辑。需要注意的是此目录隐藏了一个动态数据类(dataStore),因为集成在项目

使用canvas播放视频

将视频隐藏正常播放,将播放取到画面使用setInterval循环在画布上显示画面,因为 1s 差不多25-30帧,选择每40ms循环一次

js+canvas实现svg标签另存为图片

我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持。研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代码信息

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!