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. python--基本类型之元组

    tuple(元组): 定义和创建和作用: 元组--只读列表,只可以被查询,不能被修改.所以,列表的切片操作同样适用与元组. 元组写在小括号(())里,元素之间用逗号隔开. 虽然元组的元素不可改变,但他 ...

  2. class kind type sort区别

    class多用于 级别比如高级货就是 first class,primary class等等,以此类推kind 和sort 基本一样,就像你说的,译为 种类,what kind of疑问,回答时用so ...

  3. 【BZOJ3144】[HNOI2013]切糕

    [BZOJ3144][HNOI2013]切糕 题面 题目描述 经过千辛万苦小 A 得到了一块切糕,切糕的形状是长方体,小 A 打算拦腰将切糕切成两半分给小 B.出于美观考虑,小 A 希望切面能尽量光滑 ...

  4. 19、Java并发编程:线程间协作的两种方式:wait、notify、notifyAll和Condition

    Java并发编程:线程间协作的两种方式:wait.notify.notifyAll和Condition 在前面我们将了很多关于同步的问题,然而在现实中,需要线程之间的协作.比如说最经典的生产者-消费者 ...

  5. tp框架-------验证码

    验证码我们一般很常见,在注册或登录时,都可以用的到,下面我们就来看看它的代码和用法 加验证码是为了防止表单攻击的一种方式,为了我们的程序更加的安全 在tp框架中它自带了一个验证码的类,我们先来看一下 ...

  6. Python3中IO文件操作的常见用法

    首先创建一个文件操作对象: f = open(file, mode, encoding) file指定文件的路径,可以是绝对路径,也可以是相对路径 文件的常见mode: mode = “r”   # ...

  7. linux 同步 rsync的使用——远程服务器同步配置

    一.背景介绍 由于需要和其他系统进行对接.文件的逻辑地址通过接口传递,而文件的实体需要通过服务器间的同步进行传输.在同事的建议下选择了rsync. 二.RSYNC介绍 RSYNC 有多种方式进行同步, ...

  8. VIN码识别/车架号识别独家支持云识别

    VIN码(车架号)对于懂车的人来说并不陌生,不要小看这一串字符,从VIN码中可以读懂车辆的生产厂家.年代.车型.车身型式及代码.发动机代码及组装地点等信息. 一辆汽车的VIN码也是车辆的唯一身份证明, ...

  9. info信息的获取

    一.绝对路径(_SERVER[“SCRIPT_FILENAME”])这个是最常用,也是最有效的一个办法,找到phpinfo()页面可以直接找到网站的绝对路径,对于写shell和信息搜集是必不可少的.二 ...

  10. Python Web部署方式全汇总

    学过PHP的都了解,php的正式环境部署非常简单,改几个文件就OK,用FastCgi方式也是分分钟的事情.相比起来,Python在web应用上的部署就繁杂的多,主要是工具繁多,主流服务器支持不足. 在 ...