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

用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. HTML的语义化和一些简单优化

    1.什么是语义化? 必应网典的解释 语义化是指用合理HTML标记以及其特有的属性去格式化文档内容.通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解. 语义化的(X)HTML文档有助于提升你的 ...

  2. Java并发编程(二)同步

    在多线程的应用中,两个或者两个以上的线程需要共享对同一个数据的存取.如果两个线程存取相同的对象,并且每一个线程都调用了修改该对象的方法,这种情况通常成为竞争条件.  竞争条件最容易理解的例子就是:比如 ...

  3. recovery 根据@/cache/recovery/block.map描述从data分区升级

    随着android版本的更新,系统固件的大小也越来越大,升级包也越来越大,cache分区已经不够存储update.zip了,所以应用把update.zip下载到data分区,默认情况下data分区是可 ...

  4. Azure 标准与高级托管磁盘存储的相互转换

    托管磁盘提供两种存储选项:高级(基于 SSD)和标准(基于 HDD). 它允许基于性能需求在这两个选项之间轻松切换,并保障最短停机时间. 非托管磁盘不具备此功能. 但可以轻松转换为托管磁盘,以便在这两 ...

  5. Asp.net Mvc身份验证

    1.安装组件 Microsoft.AspNet.Identity.Core,身份认证核心组件 安装Microsoft.AspNet.Identity.EntityFramework,EF实现身份认证 ...

  6. Fedora 29 使用 SCL (Software Collections)

    在社区中SCL 由Centos 项目进行维护,所以我们使用CentOS 7 SCL源.CentOS SCL中提供了devtoolset-7-gcc-c++,版本正好为 gcc version 7.3. ...

  7. 非对称加密与GPG/PGP

    最近浏览博客的时候,经常会看到博主展示出自己的公钥,于是对 GPG/PGP 产生兴趣.下面简单记录相关文章的链接,方便以后了解. 简介: 1991年,程序员Phil Zimmermann为了避开政府的 ...

  8. 阿里云上安装pip3(Ubuntu)

    安装pip3: 这个简单啊,到网上下载get-pip.py的脚本,然后scp到你的阿里云服务器上,python3 get-pip.py即可. 如果不会scp,哈哈,按照下面的几步: wget http ...

  9. 编写一个BAT脚本协助运维人员遇到问题时候调测数据库是否有效连接成功的操作攻略

    简单摘要: 1.内网系统出现故障需要排查 2.运维人员不熟悉数据库操作,没法通过连接数据库和执行SQL语句的方式排查数据库及数据是否正常 3.解决方案:编写一个bat脚本,运维人员双击运行即可.   ...

  10. 10LaTeX学习系列之---Latex的文档结构

    目录 目录 前言 (一)对于Ctex宏包中的文档结构 1.说明 2.源代码 3.输出效果 4.技巧 (二)对于ctexart的文档结构 1.说明 2.源代码 3.输出效果 (三)对于ctexbook的 ...