在地图上实时绘制大量(万级别)图形,实时绘制的原因是因为各个图形形状不同,图形要按照后端传送的参数来绘制。

用canvas绘制图形比较方便,javascript的api接口也比较简单。现在也有很多的js canvas库,比如这个:createjs中的easeljs,对canvas进行了轻量的封装,支持链式操作,支持给图形添加事件,虽然它是专门用来做游戏开发的,但拿它来实时绘制图形,在图形上添加事件,真的是再方便不过了。

比如绘制一个实心圆或扇形,可以用arc()函数:

但是这里有个问题,arc函数是很慢的,很耗费cpu资源的。那么该如何优化呢?如果仅从canvas绘制的角度来看:用其它方法来代替arc是一个不错的选择,比如用createjs提供的BitMap引入已有的图片,然后将图片进行旋转、变形等,如果可以满足需求,那么也很不错。

Canvas绘图优化之使用位图--基于createjs库的更多相关文章

  1. 小程序Canvas性能优化实战

    以下内容转载自totoro的文章<小程序Canvas性能优化实战!> 作者:totoro 链接:https://blog.totoroxiao.com/canvas-perf-mini/ ...

  2. HTML5 学习总结(四)——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  3. HTML5_03之Canvas绘图

    1.Canvas绘图--JS绘图: <canvas id='c1' width='' height=''></canvas> * Canvas尺寸不能用CSS设置: c1.he ...

  4. canvas绘图、WebGL、SVG

    目录 一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画 二.WebGL 2.1.HTML ...

  5. HTML5 学习笔记(四)——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  6. Canvas绘图中的路径描边与填充

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...

  7. Android--使用Canvas绘图

    前言 除了使用已有的图片之外,Android应用常常需要在运行时根据场景动态生成2D图片,比如手机游戏,这就需要借助于Android2D绘图的支持.本篇博客主要讲解一下Android下使用Canvas ...

  8. >炫酷的计时器效果Canvas绘图与动画<

    >炫丽的计时器效果Canvas绘图与动画< 虽然我是学习java的,但是因为最近使用html5的关系,多学习了一下前端知识. 现在,我要介绍的计时器是十分炫酷的,使用画布完成. 喜欢htm ...

  9. HTML学习总结(四)【canvas绘图、WebGL、SVG】

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

随机推荐

  1. 【BI学习笔记】在Linux上安装Wyn Enterprise商业智能报表服务器

    在百度文库上找来的,放到这里,避免以后丢了. 葡萄城出品的Wyn Enterprise商业智能软件的设计器和查看视图是通过浏览器使用的,不需要安装专门的程序.Wyn Enterprise的服务器端可以 ...

  2. 怎样制作爽心的 dashboard ?

    在目前的大数据趋势中,数据的大屏可视化成为大家所推崇的一种互动展示模式.如果我们能够早一些了解和掌握这方面的技术,相信对我们的未来将会非常有帮助! 我们知道,通过报表工具实现大屏展示可以通过单张报表. ...

  3. Core Animation-2:寄宿图

    #寄宿图 >图片胜过千言万语,界面抵得上千图片  ——Ben Shneiderman 我们在第一章『图层树』中介绍了CALayer类并创建了一个简单的有蓝色背景的图层.背景颜色还好啦,但是如果它 ...

  4. [20171206]rman与truncate.txt

    [20171206]rman与truncate.txt --//昨天下班在回家的路上,突然想起以前遇到的问题,就是truncate表后,rman做备份时会备份多少truncate表的信息,--//当时 ...

  5. [20171120]理解v$session的state字段(11G).txt

    [20171120]理解v$session的state字段(11G).txt --//https://blogs.oracle.com/database4cn/vsession-%e4%bd%a0%e ...

  6. 用Python实现数据结构之队列

    队列 队列与栈的类型很相似,但它遵循的原则是先进先出(FIFO),也就是元素插入的时候只能在该数据结构的末端,而删除只能删除最前面的元素.队列同样应用广泛,例如打印机的队列或者是一个web服务器响应请 ...

  7. 使用Python语言理解递归

    递归 一个函数在执行过程中一次或多次调用其本身便是递归,就像是俄罗斯套娃一样,一个娃娃里包含另一个娃娃. 递归其实是程序设计语言学习过程中很快就会接触到的东西,但有关递归的理解可能还会有一些遗漏,下面 ...

  8. windows下编写shell脚本执行错误

    在 windows 下,换行符是 \r\n,在linux下,换行符是 \n.如果你在IDEA里写sh脚本,可以手动设置脚本的换行符为 \n,如果你用notepad++写脚本,可以显示所有字符,以便明确 ...

  9. JQuery中$.cookie()方法的使用[转]

    jquery.cookie.js插件: <script type="text/javascript" src="js/jquery-1.6.2.min.js&quo ...

  10. arcgis javascript api 事件的监听及移除

    On Style Events 方式 var mapExtentChange = map.on("extent-change", changeHandler); function ...