参考链接:
  菜鸟教程 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的区别的更多相关文章

  1. 列表总结Canvas和SVG的区别

    参考链接: 菜鸟教程 HTML5 内联SVG 经典面试题(讨论canvas与svg的区别) Canvas | SVG ---|--- 通过 JavaScript 来绘制 2D 图形|是一种使用 XML ...

  2. canvas和svg的区别

    讨论关于canvas和svg的区别.首先canvas是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,已经有十几年了.svg并不是html5专有的标签,最初 ...

  3. canvas、svg、canvas与svg的区别

    一.canvas canvas 画布,位图 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形 注意:不要在style中给canvas设置宽高,会有位移差 can ...

  4. 前端绘图方式Canvas和SVG的区别

    Canvas和SVG是html5中支持2种可视化技术,都是可以在画布上绘制图形和放入图片.下面来介绍和分析一下他们. 一.Canvas 和 SVG 简介 1.什么是Canvas? Canvas 是H5 ...

  5. 【HTML5】Canvas和SVG的区别

    * SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的.您可以为某个元素附加 JavaScript 事件处理器. 在 ...

  6. Canvas 与 SVG 的区别

    这个说实话,我只用过canvas画过一些简单的图形,复杂的不懂,之所以列出来,是因为之前在面试中有被问到,在这里mark一下,后期深化. 以下的内容全部来自于w3school http://www.w ...

  7. canvas与svg的区别

    1.历史: canvas是html5提供的新元素. 而svg存在的历史要比canvas久远,已经有十几年了.svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或 ...

  8. html5 Canvas和SVG的区别是什么(总结)

    html5 Canvas和SVG的区别是什么(总结) 一.总结 一句话总结:都是2D做图,svg是矢量图,canvas是位图.Canvas 是逐像素进行渲染的,适合游戏. 1.svg的全称是什么? S ...

  9. canvas与svg区别

    canvas与svg区别 和SVG比起来有两个弱点,一个是画布里的内容是独立的,不能当成html元素:二是CANVAS是属于位图格式,而SVG是矢量图,可以平滑放大. HTML5的canvas画出来的 ...

随机推荐

  1. java并发实战:连接池实现

    池化技术简介 在我们使用数据库的过程中,我们往往使用数据库连接池而不是直接使用数据库连接进行操作,这是因为每一个数据库连接的创建和销毁的代价是昂贵的,而池化技术则预先创建了资源,这些资源是可复用的,这 ...

  2. css:url链接去下划线+点击前黑色+点击时灰色+点击后黑色

    一般的文章列表 加了样式之后的效果 附上css代码 /*点击前*/ a:link{ color: black; } /*点击后*/ a:visited{ color: black; } /*点击时*/ ...

  3. JQuery制作网页——第九章 表单验证

    1.  表单验证:减轻服务器的压力.保证输入的数据符合要求: 2.  常用的表单验证:日期格式.表单元素是否为空.用户名和密码.E-mail地址.身份证号码等: 3.  表单验证的思路: 1.     ...

  4. 微信网页授权,错误40163,ios正确,安卓错误?

    2017-07-29:结贴昨天研究了半天,也没解决,看到出错的http头里面有PHPSESSID,回头去修改了一下程序里的session部分的代码(这部分代码在微信网页授权之后),,也不知道是腾讯那边 ...

  5. linux 编译安装pureFTP

    安装openssl支持 wget -c https://www.openssl.org/source/openssl.org/source/openssl-1.1.0c.tar.gz tar -zxv ...

  6. linux 操作之压缩与解压

    压缩与解压 压缩格式:zip , rar , 7z , iso , exe gzip (以下是命令操作) gzip [文件名]  #压缩成gz格式 , 原来的文件消失 , 不支持目录. bzip2 - ...

  7. .net第三方数据库物理卡号同步功能实现

    本地数据库用的是Oracle,第三方数据库是SQL Server,连接字符串保存在web.config里面. 第三方数据库为增量,每次读取要记录读取的最大位置.我是保存在本地txt文件里面. //保存 ...

  8. SRM32(8)——ADC和DAC

    1.ADC简介 STM32 拥有 1~3 个 ADC(STM32F101/102 系列只有 1 个 ADC)STM32F103至少拥有2个ADC,STM32F103ZE包含3个ADC,这些 ADC 可 ...

  9. 在window10平台下安装TensorFlow(only cpu)

    这是我在安装tensorflow遇到的问题记录 希望可以给大家一些帮助(2019年1月6日) 1. 需要安装的环境及软件 python3.6 Anaconda Tensorflow 2. 先安装ana ...

  10. R语言爬虫:穿越表单

    使用rvest包实现实现穿越表单以及页面的跳转 formurl <- "http://open.xmu.edu.cn/oauth2/authorize?client_id=1010&a ...