SVG与Canvas的区别与比较如下:

   svg:使用xml描述2D图形,canvas使用javascript描述2D图形。

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

   svg基于xml,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。

          Canvas                                                    SVG

  <canvas> 标签定义图形,比如图表和其他图像,但必须使用脚本(通常是JavaScript)来绘制图形。      使用 XML 格式定义图形,用于定义用于网络的基于矢量的图形,图像在放大或改变尺寸的情况下其图形质量不会有损失.
  依赖分辨率                                             不依赖分辨率
  不支持事件处理器                                          支持事件处理器
  弱的文本渲染能力                                          最适合带有大型渲染区域的应用程序(比如谷歌地图)
  能够以 .png 或 .jpg 格式保存结果图像                                复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
  适合用于图像密集型的游戏,其中的许多对象会被频繁重绘                        不适合游戏应用

  

本文在撰写中参考过以下以下网站的资料:

http://www.runoob.com/html/html5-svg.html                                                    

Html5新增元素中Canvas 与内联SVG的比较!的更多相关文章

  1. HTML5 Canvas、内联 SVG、Canvas vs. SVG

    canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...

  2. 【转】HTML5新增元素兼容旧浏览器方法

    ref:http://www.jb51.net/html5/163906.html 问题:如何让IE8-兼容这些标签?(需要设计JS中的DOM) 代码如下: <span style=" ...

  3. HTML5 学习03——内联 SVG

    什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺 ...

  4. HTML5: HTML5 内联 SVG

    ylbtech-HTML5: HTML5 内联 SVG 1.返回顶部 1. HTML5 内联 SVG HTML5 支持内联 SVG. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Ve ...

  5. HTML5新增核心工具——canvas

    原文:HTML5新增核心工具--canvas Canvas元素称得上是HTML5的核心所在,它是一个依靠JavaScript绘制华丽图像的元素. Canvas由一个可绘制地区HTML代码中的属性定义决 ...

  6. 小强的HTML5移动开发之路(17)——HTML5内联SVG

    来自:http://blog.csdn.net/dawanganban/article/details/18189181 一.什么是SVG 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集) ...

  7. HTML5学习笔记3 内联SVG

    HTML5支持内联SVG 下面来介绍一下什么是SVG SVG可缩放矢量图形 可缩放矢量是基于可扩展标记语言(标准通用语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准 ...

  8. HTML5 新增元素梳理

    HTML5新增元素如下图: <canvas> 新元素 <canvas> 标签定义图形,比如图表和其他图像,该标签基于javascript的绘图api 新多媒体元素 <au ...

  9. Access中多表内联的SQL写法

    在Access中多表内联,可以使用传统的where条件逐行筛选,如: SELECT SNAME,CNAME,DEGREE FROM STUDENT,COURSE,SCORE where student ...

随机推荐

  1. 20155212 实验二 Java面向对象程序设计

    20155212 实验二 Java面向对象程序设计 单元测试 三种代码 用编程去解决问题,必须学会写三种码: 伪代码 产品代码 测试代码 例: MyUtil 类解决一个百分制成绩转成"优.良 ...

  2. 20155220 2016-2017-2 《java程序设计》第四周总结

    教材学习内容总结 第六章 继承与多态 继承 继承的基本原则是: 子类继承父类的所有成员变量(包括静态成员): 子类继承除父类构造方法外的所有成员方法(包括静态方法): 子类不能继承父类的构造方法,但在 ...

  3. # 20155224 实验三 敏捷开发与XP实践 实验报告

    20155224 实验三 敏捷开发与XP实践 实验报告 实验内容 XP基础 XP核心实践 相关工具 实验要求 没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim ...

  4. # 20155224 2016-2017-2 《Java程序设计》第10周学习总结

    20155224 2016-2017-2 <Java程序设计>第10周学习总结 教材学习内容总结 密码学: 主要是研究保密通信和信息保密的学科, 包括信息保密传输和信息加密存储等. 密码学 ...

  5. # 学号20155308 2006-2007-2 《Java程序设计》第4周学习总结

    学号20155308 2006-2007-2 <Java程序设计>第4周学习总结 教材学习内容总结 6.1 何谓继承 继承基本上就是避免多个类间重复定义共同行为. 许多类之间具有相同的属性 ...

  6. 20155334 2016-2017-2 《Java程序设计》第一周学习总结

    20155334 2016-2017-2 <Java程序设计>第一周学习总结 教材学习内容总结 第一章主要讲了Java的前世今生以及Java的三大平台(Java SE.Java EE.Ja ...

  7. 每天一个linux命令(1):ln 命令

    每天一个linux命令(35):ln 命令 ln 是linux中又一个非常重要命令,它的功能是为某一个文件在另外一个位置建立一个同步的链接.当我们需要在不同的目录,用到相同的文件时,我们不需要在 每一 ...

  8. WPF 动画:同为控件不同命 - 简书

    原文:WPF 动画:同为控件不同命 - 简书 1. 及格与优秀 读大学的时候,有一门课的作业是用 PPT 展示. 但是我们很多同学都把 PPT 当做 Word 来用,就单纯地往里面堆文字. 大家都单纯 ...

  9. MSP430的JTAG接口和BSW接口

    1.JTAG口,JTAG引脚如下定义:  单片机TCK——测试时钟输入,接仿真器7脚  单片机TDI——测试数据输入,接仿真器2脚  单片机TDO——测试数据输出,接仿真器1脚  单片机TMS——测试 ...

  10. linux安装PHP-memcache-redis扩展

    1.php memcache 扩展 http://pecl.php.net/package/memcache/3.0.8 下载文件源码 #tar zxvf memcache-3.0.8.tar#/us ...