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所定义的路径会自动和路径集合中的最后一个路径连接起来,如下图所示:
此处的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绘制的效果好的,锯齿严重。 要实现好的效果,还需要引入去锯齿相关技术。 绘制的效果如下:
用webgl绘制2d图形的相关主题,回头会另外写一篇文章介绍。敬请关注。
webgl2绘制
webgl2 引入了实例化数组,通过这个功能,可以实现把很多次的绘制调用合并为一个绘制调用,这会极大提高绘制效率。
有关实例化数组的功能,参考https://www.jianshu.com/p/d40a8b38adfe
绘制10万个圆形的效率大概在每帧零点零几毫秒,简直就是大boss级别的快,如下图:
后记
通过这篇文章,除了想给读者传递相关知识点之外,其实还想表达一个观点:
相比于知识点,程序员更加需要锻炼的是底层思维能力。在我看来,底层思维能力包括:学习力、创造力、判断力和思考力。而勤于思考的人,不拘泥于司空见惯,都能够从日常枯燥的任务中发现很多有趣的东西,启发更多深入的思路。
勤于思索是很重要的。 知识是死的,人是活的,同样的知识点,在思考力强的人手上,就能延伸出很多好的解决方案。
这就要求人勤于探索,不要满足于把任务完成,而是要多深入思考,多总结,探索更多的方案和可能性。这本身有助于锻炼思考力和创造力,而思考力和创造力又会反过来帮助你解决更多的问题。
其实IT行业的知识更新越来越快,能够以不变应万变的人,就是拥有良好的学习力、创造力、判断力和思考力的人。这些能力会让你在变换万千的技术海洋中,屹立不倒,不被淹没。
当然,标书可能有点好为人师了。 在日常的工作中,彪叔更喜欢做的事情,就是启迪下属的思考,而不仅仅是某个问题的解决方案。这是比学习知识更加重要的素质。彪叔也会在我的其他文章中,分享底层能力的相关认知。有兴趣的猿们可以关注彪叔的公号:ITman彪叔
欢迎关注公众号:
canvas高效绘制10万图形,你必须知道的高效绘制技巧的更多相关文章
- 使用 HTML5 canvas 绘制精美的图形
HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...
- HTML5 canvas 绘制精美的图形
HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...
- 使用原生JavaScript的Canvas实现拖拽式图形绘制,支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形,不依赖任何库和插件,有演示demo
前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包 ...
- 「干货」面试官问我如何快速搜索10万个矩形?——我说RBush
「干货」面试官问我如何快速搜索10万个矩形?--我说RBUSH 前言 亲爱的coder们,我又来了,一个喜欢图形的程序员,前几篇文章一直都在教大家怎么画地图.画折线图.画烟花,难道图形就是这样嘛,当 ...
- matlab绘制二维图形
常用的二维图形命令: plot:绘制二维图形 loglog:用全对数坐标绘图 semilogx:用半对数坐标(X)绘图 semilogy:用半对数坐标(Y)绘图 fill:绘制二维多边填充图形 pol ...
- 使用Python抓取猫眼近10万条评论并分析
<一出好戏>讲述人性,使用Python抓取猫眼近10万条评论并分析,一起揭秘“这出好戏”到底如何? 黄渤首次导演的电影<一出好戏>自8月10日在全国上映,至今已有10天,其主演 ...
- RRDtool绘制lvs连接数图形
需求:用RRDtool绘制lvs的连接数图形 RRDtool是一个强大的绘图工具,作者是Tobias Oetiker. RRD全称Round Robin Database,轮转数据库,也是一个时间序列 ...
- .net core Json字符串的序列化和反序列化通用类源码,并模拟了10万数据对比DataContractJsonSerializer和Newtonsoft性能
我们在开发中Json传输数据日益普遍,有很多关于Json字符串的序列化和反序列化的文章大多都告诉你怎么用,但是却不会告诉你用什么更高效.因为有太多选择,人们往往会陷入选择难题. 相比.NET Fram ...
- [转帖]单集群10万节点 走进腾讯云分布式调度系统VStation
单集群10万节点 走进腾讯云分布式调度系统VStation https://www.sohu.com/a/227223696_355140 2018-04-04 08:18 云计算并非无中生有的概念, ...
随机推荐
- 来自苹果的编程语言——Swift简单介绍【整理】
2014年06月03日凌晨,Apple刚刚公布了Swift编程语言,本文从其公布的书籍<The Swift Programming Language>中摘录和提取而成.希望对各位的iOS& ...
- prometheus-入门尝试
prometheus-入门 Prometheus 是由 SoundCloud 开源监控告警解决方案2015 年在 github 上开源以来,已经吸引了 很多大公司的使用:2016 年 Promethe ...
- Day2 Mybatis初识(二)
mapper接口开发 传统dao的开发问题(ibatis) 方法调用:字符串易错,硬编码 mapper代理开发 a) 编写全局配置 b) 编写接口(自动根据接口和映射文件创建实现类) c) 编写映射文 ...
- Day10 上传和下载
上传 将本地文件传输到服务器 jsp: 文件上传的请求方式必须是post input的type必须是file enctype="multipart/form-data" ...
- 《网络安全编程基础》之Socket编程
<网络安全编程基础>之Socket编程 我的代码 server.c // server.cpp : Defines the entry point for the console appl ...
- zoc 下载服务器上数据出现的问题
zoc上有一个download的按钮能够将服务器上的数据下载下来,但是在下载过程中出现了错误 但是点击会出现下面的问题: 这个配置默认是采用ZMODEM文件传输协议 但是可以看出来,这个传输协议有点问 ...
- 关于ssm框架使用mysql控制台出现警告问题
使用MySQL时,总会时不时出现这种警告信息 警告信息:WARN: Establishing SSL connection without server's identity verification ...
- Longest Substring Without Repeating Characters[medium]
Given a string, find the length of the longest substring without repeating characters. Examples: Giv ...
- Mac编译安装swfTools
Mac编译安装swfTools Mac编译安装swfTools 下载源码 解压源码 安装依赖项 ./configure执行配置或者执行如下配置命令: 需要注意这里存在部分代码错误,需要修改解决后执行 ...
- 用HTML编写淘宝页面
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...