浅谈Canvas与SVG_canvas svg 缩放 性能-程序员宅基地

技术标签: Web  SVG  Canvas  

1SVG

SVG 可缩放矢量图形(Scalable Vector Graphics),是一种使用可扩展标记语言(XML)描述2D图形的语言。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。

SVG基于XML,意味着SVG DOM中的每个元素都是可用的,可以为某个元素附加 JavaScript 事件处理器。

在SVG中,每个被绘制的图形均被视为对象,如果SVG对象的属性发生变化,那么浏览器能够自动重现图形。也就是说,SVG绘图很容易编辑,只需要增加或移除相应的元素就可以了。

SVG是基于矢量的,它能够很好的处理图形大小的改变。SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。

SVG功能更完善,适合静态图片展示,高保真文档查看和打印的应用场景。

 

2、Canvas

Canvas 通过 JavaScript 来绘制2D图形(动态生成)。

Canvas 是逐像素进行渲染的。

在Canvas中,一旦图形被绘制完成,就不会继续得到浏览器的关注,如果其位置发生变化,整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

Canvas是基于位图的,它不能够改变大小,只能缩放显示。

Canvas提供的功能更原始,适合像素处理,动态渲染和大数据量绘制。

 

3、Canvas与SVG

Canvas

SVG

位图

矢量图

依赖分辨率

不依赖分辨率

逐像素进行渲染

逐元素(DOM元素)进行渲染

通过JavaScript 绘制图形

基于XML,用文本格式的描述性语言来描述图像内容

不支持事件处理器。Canvas输出的是一整幅画布,能够以 .png 或 .jpg 格式保存结果图像

支持事件处理器。SVG绘制出的每个图形元素都是独立的DOM节点,能够方便的绑定事件

不能够改变大小,只能缩放显示

能够很好的处理图形大小的改变

放大或缩小时图形质量会有所损失

放大或缩小时图形质量不会有所损失

适合像素处理,动态渲染和大数据量绘制,最适合图像密集型的游戏(频繁重绘对象)

适合静态图片展示,高保真文档查看和打印的应用场景,不适合游戏应用

如果图形位置发生变化,整个场景需要重新绘制,包括任何或许已被图形覆盖的对象

如果对象属性发生变化,浏览器能自动重现图形。也就是说,SVG绘图很容易编辑,只需要增加或移除相应的元素即可


4、Canvas与SVG绘制地图的选择

当绘制的对象数目较少时,Canvas和SVG的性能差不多,但是当数量增加之后,canvas的性能要远远优于SVG。

当需要动态渲染地图,频繁重绘时,选择Canvas更好。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zhouziyu2011/article/details/69063848

智能推荐

关于各类Python安装软件之间的关系(Python, Anaconda, Jupyter notebook和Pycharm)_jupyter,pycharm和python的关系-程序员宅基地

文章浏览阅读1k次。关于各类Python安装软件之间的关系(Python, Anaconda, Jupyter notebook和Pycharm)Python这里说的Python,就是最原生的Python,是我们学习Python所需要的最基本的环境。就像学习Java需要安装JDK一样。Python可以到Python官网(https://www.python.org/downloads/)下载对应版本,使用“下一步”进行安装,然后配置环境变量;接着就可以计事本里编写python代码程序,并到终端编译运行。上述过程与初学_jupyter,pycharm和python的关系

rhas3.0 + qmail + mysql + smtp + vpopmail + igenus + qmailadmin-程序员宅基地

文章浏览阅读4.5k次。一、安装说明。 为了方便安装我在安装Redhat3.0时选了apache、php、mysql,注意mysql-devel开发包一定要装上, 二、安装ucspi-tcp-0.88 1.这是由于redhat3.0(包括redhat 9.0)的glibc的版本有问题,必须有下列软件及补丁才能编译 http://cr.yp.to/ucspi-tcp/ucspi-tcp-0.88.tar.gzhttp://

序列的趋势存在性检验:Cox-Stuart test和Mann-Kendall test-程序员宅基地

文章浏览阅读7.2k次,点赞3次,收藏43次。我们经常听这样的描述,数据呈现上升/下降/无明显趋势,这个结论大都是靠人眼观察出来的,往往不够严谨。我们需要更科学的方法,下面就借助非参里的符号检验,来谈谈检验趋势存在性的两种常用方法。Cox-Stuart趋势检验原理对于数据序列x1,x2,x3,……,xn,我们以位置中间数c为界把该序列分成两部分,并两两配对成(x1,xc+1),(x2,xc+2),……(xc,xn)的形式。接着我们以每一组中后一个数减去前一个数并记下正负性,s+表示得到正数的个数,s-表示得到负数的个数。如果s+远远大于s

66666-程序员宅基地

文章浏览阅读62次。

Java垃圾回收精粹——Part2-程序员宅基地

文章浏览阅读701次。在第2部分里介绍了Hotspot中的堆结构、对象分配以及次要回收。Hotspot中的堆结构理解不同的收集器的工作方式,是探讨Java堆结构如何支持分代机制的最好的方式。伊甸区(Eden)的大部分对象都是刚刚被分配的。幸存区(survivor)用来临时存储那些从伊甸区里幸存下来的对象。当我们讨论完次要回收(minor collections)后将描述幸存区的用途。伊甸区和幸存区统称为“年

152 页简明《计算机视觉》入门教程,带你回顾 CV 发展脉络_本文是计算机科学家christoph rasche撰写的一份计算机视觉方面的系列教程,从-程序员宅基地

文章浏览阅读305次。本文是计算机科学家Christoph Rasche撰写的一份计算机视觉方面的系列教程,从传统的图像处理、特征提取到近几年很热的深度神经网络,以及深度学习方法在目标检测、图像检索、图像分割、目标跟踪等一系列前沿的介绍。书本里本文是计算机科学家Christoph Rasche撰写的一份计算机视觉方面的系列教程,从传统的图像处理、特征提取到近几年很热的深度神经网络,以及深度学习方法在目标检测、图像检索、..._本文是计算机科学家christoph rasche撰写的一份计算机视觉方面的系列教程,从

随便推点

Linux学习-33-SetUID、SetGID和SBIT文件特殊权限用法_linux设置目录特殊权限sbit-程序员宅基地

文章浏览阅读318次。Linux学习-33-SetUID、SetGID和SBIT文件特殊权限用法_linux设置目录特殊权限sbit

Proxmox VE 7.2 qm 方式批量导入ESXi OVA_virtio scsi single-程序员宅基地

文章浏览阅读2.9k次。一个ovf文件,文件包虚拟机的硬件配置,例如cpu规格、内存等一个或多个vmdk,虚拟机的硬盘镜像,数量取决于虚拟机有多少个硬盘。_virtio scsi single

ListView的使用及其优化_listview的基本使用与优化-程序员宅基地

文章浏览阅读191次。一、直接使用ListView组件创建1.直接在XML中创建ListView用entries属性附上一个数组资源其中divider属性是设置分割线可以使用颜色和drawable资源分割 <ListView android:id="@+id/listView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:divi_listview的基本使用与优化

华为无线AC常用命令记录_display ap all为idle-程序员宅基地

文章浏览阅读833次,点赞8次,收藏7次。【代码】华为无线AC常用命令记录。_display ap all为idle

编译原理复习(2023.4.25考试版本)_有害规则和多余规则-程序员宅基地

文章浏览阅读1k次,点赞3次,收藏21次。本次复习采用的是这本书,如有书写不当的地方,欢迎批评指正!_有害规则和多余规则

如何在Ubuntu 14.04当中将Bind配置为仅权威DNS服务器_auth-nxdomain no;-程序员宅基地

文章浏览阅读1.4k次。提供:ZStack云计算 系列教程本教程为DNS管理介绍系列七篇中的第五篇。内容介绍DNS,或者称为域名系统,往往成为学习网站与服务器配置中的一大难点。尽管很多人都会使用由托管厂商或者域名注册商提供的DNS服务器,但建立自己的DNS服务器亦能带来诸多不容忽视的助益。在本篇教程中,我们将探讨如何在Ubuntu 14.04当中安装Bind9 DNS服务器并将其配置为仅权威DNS服务器。作为示例,我们将立_auth-nxdomain no;

推荐文章

热门文章

相关标签