总结Canvas和SVG的区别
参考链接:
菜鸟教程 HTML5 内联SVG
经典面试题(讨论canvas与svg的区别)
| Canvas | SVG |
|---|---|
| 通过 JavaScript 来绘制 2D 图形 | 是一种使用 XML 描述 2D 图形的语言 |
是HTML5提供的新元素<canvas> |
历史久远,并不是HTML5转悠的标签 |
| 位图(标量图),放大或改变尺寸会失真;逐像素进行渲染,依赖分辨率 | 矢量图,放大或改变尺寸不会失真;不依赖分辨率 |
| 弱的文本渲染能力(因为放大会失真) | 最适合带有大型渲染区域的应用程序,比如谷歌地图(因为放大不会失真) |
| 能够以 .png 或 .jpg 格式保存结果图像;能够引入 .png 或 .jpg格式的图片 | 不能以 .png 或 .jpg 格式保存结果图像;不能引入 .png 或 .jpg格式的图片 |
| 不支持事件处理器(一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。) | 支持事件处理器(SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。) |
| 不能被引擎抓取 | 可以被引擎抓取 |
| --- | 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) |
| 最适合图像密集型的游戏,其中的许多对象会被频繁重绘 | 不适合游戏应用 |
总结Canvas和SVG的区别的更多相关文章
- 列表总结Canvas和SVG的区别
参考链接: 菜鸟教程 HTML5 内联SVG 经典面试题(讨论canvas与svg的区别) Canvas | SVG ---|--- 通过 JavaScript 来绘制 2D 图形|是一种使用 XML ...
- canvas和svg的区别
讨论关于canvas和svg的区别.首先canvas是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,已经有十几年了.svg并不是html5专有的标签,最初 ...
- canvas、svg、canvas与svg的区别
一.canvas canvas 画布,位图 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形 注意:不要在style中给canvas设置宽高,会有位移差 can ...
- 前端绘图方式Canvas和SVG的区别
Canvas和SVG是html5中支持2种可视化技术,都是可以在画布上绘制图形和放入图片.下面来介绍和分析一下他们. 一.Canvas 和 SVG 简介 1.什么是Canvas? Canvas 是H5 ...
- 【HTML5】Canvas和SVG的区别
* SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的.您可以为某个元素附加 JavaScript 事件处理器. 在 ...
- Canvas 与 SVG 的区别
这个说实话,我只用过canvas画过一些简单的图形,复杂的不懂,之所以列出来,是因为之前在面试中有被问到,在这里mark一下,后期深化. 以下的内容全部来自于w3school http://www.w ...
- canvas与svg的区别
1.历史: canvas是html5提供的新元素. 而svg存在的历史要比canvas久远,已经有十几年了.svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或 ...
- html5 Canvas和SVG的区别是什么(总结)
html5 Canvas和SVG的区别是什么(总结) 一.总结 一句话总结:都是2D做图,svg是矢量图,canvas是位图.Canvas 是逐像素进行渲染的,适合游戏. 1.svg的全称是什么? S ...
- canvas与svg区别
canvas与svg区别 和SVG比起来有两个弱点,一个是画布里的内容是独立的,不能当成html元素:二是CANVAS是属于位图格式,而SVG是矢量图,可以平滑放大. HTML5的canvas画出来的 ...
随机推荐
- java并发实战:连接池实现
池化技术简介 在我们使用数据库的过程中,我们往往使用数据库连接池而不是直接使用数据库连接进行操作,这是因为每一个数据库连接的创建和销毁的代价是昂贵的,而池化技术则预先创建了资源,这些资源是可复用的,这 ...
- css:url链接去下划线+点击前黑色+点击时灰色+点击后黑色
一般的文章列表 加了样式之后的效果 附上css代码 /*点击前*/ a:link{ color: black; } /*点击后*/ a:visited{ color: black; } /*点击时*/ ...
- JQuery制作网页——第九章 表单验证
1. 表单验证:减轻服务器的压力.保证输入的数据符合要求: 2. 常用的表单验证:日期格式.表单元素是否为空.用户名和密码.E-mail地址.身份证号码等: 3. 表单验证的思路: 1. ...
- 微信网页授权,错误40163,ios正确,安卓错误?
2017-07-29:结贴昨天研究了半天,也没解决,看到出错的http头里面有PHPSESSID,回头去修改了一下程序里的session部分的代码(这部分代码在微信网页授权之后),,也不知道是腾讯那边 ...
- linux 编译安装pureFTP
安装openssl支持 wget -c https://www.openssl.org/source/openssl.org/source/openssl-1.1.0c.tar.gz tar -zxv ...
- linux 操作之压缩与解压
压缩与解压 压缩格式:zip , rar , 7z , iso , exe gzip (以下是命令操作) gzip [文件名] #压缩成gz格式 , 原来的文件消失 , 不支持目录. bzip2 - ...
- .net第三方数据库物理卡号同步功能实现
本地数据库用的是Oracle,第三方数据库是SQL Server,连接字符串保存在web.config里面. 第三方数据库为增量,每次读取要记录读取的最大位置.我是保存在本地txt文件里面. //保存 ...
- SRM32(8)——ADC和DAC
1.ADC简介 STM32 拥有 1~3 个 ADC(STM32F101/102 系列只有 1 个 ADC)STM32F103至少拥有2个ADC,STM32F103ZE包含3个ADC,这些 ADC 可 ...
- 在window10平台下安装TensorFlow(only cpu)
这是我在安装tensorflow遇到的问题记录 希望可以给大家一些帮助(2019年1月6日) 1. 需要安装的环境及软件 python3.6 Anaconda Tensorflow 2. 先安装ana ...
- R语言爬虫:穿越表单
使用rvest包实现实现穿越表单以及页面的跳转 formurl <- "http://open.xmu.edu.cn/oauth2/authorize?client_id=1010&a ...