Html5新增元素中Canvas 与内联SVG的比较!
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的比较!的更多相关文章
- HTML5 Canvas、内联 SVG、Canvas vs. SVG
canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...
- 【转】HTML5新增元素兼容旧浏览器方法
ref:http://www.jb51.net/html5/163906.html 问题:如何让IE8-兼容这些标签?(需要设计JS中的DOM) 代码如下: <span style=" ...
- HTML5 学习03——内联 SVG
什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺 ...
- HTML5: HTML5 内联 SVG
ylbtech-HTML5: HTML5 内联 SVG 1.返回顶部 1. HTML5 内联 SVG HTML5 支持内联 SVG. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Ve ...
- HTML5新增核心工具——canvas
原文:HTML5新增核心工具--canvas Canvas元素称得上是HTML5的核心所在,它是一个依靠JavaScript绘制华丽图像的元素. Canvas由一个可绘制地区HTML代码中的属性定义决 ...
- 小强的HTML5移动开发之路(17)——HTML5内联SVG
来自:http://blog.csdn.net/dawanganban/article/details/18189181 一.什么是SVG 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集) ...
- HTML5学习笔记3 内联SVG
HTML5支持内联SVG 下面来介绍一下什么是SVG SVG可缩放矢量图形 可缩放矢量是基于可扩展标记语言(标准通用语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准 ...
- HTML5 新增元素梳理
HTML5新增元素如下图: <canvas> 新元素 <canvas> 标签定义图形,比如图表和其他图像,该标签基于javascript的绘图api 新多媒体元素 <au ...
- Access中多表内联的SQL写法
在Access中多表内联,可以使用传统的where条件逐行筛选,如: SELECT SNAME,CNAME,DEGREE FROM STUDENT,COURSE,SCORE where student ...
随机推荐
- Linux入门进阶第五天——用户管理(帐号管理 )下
一.身份切换 为了避免 rm -rf /* 的悲剧发生,平时使用时,尽量使用一般帐号!需要环境设置等必要时才使用root 1.su命令 一般地,推荐使用su - / su - username的形式来 ...
- 洛谷1552 [APIO2012]派遣
洛谷1552 [APIO2012]派遣 原题链接 题解 luogu上被刷到了省选/NOI- ...不至于吧 这题似乎有很多办法乱搞? 对于一个点,如果他当管理者,那选的肯定是他子树中薪水最少的k个,而 ...
- C#是数据类型
C#又开始了 开始数据类型 用的软件是VS2017 E short 短整型 int 中等整型 long 长整形 string 字符串类型 bool 布尔类型(true/flase) 相当于数 ...
- 【一】H.264/MPEG-4 Part 10 White Paper 翻译之 Overview of H.264
翻译版权所有,转载请注明出处~ xzrch@2018.09.14 ------------------------------------------------------------------- ...
- 搭建RTSP服务器时nginx的nginx.conf文件配置
worker_processes 1; events { worker_connections 1024;} http { include mime.types; default_type appli ...
- JavaScript学习笔记(五)——类型、转换、相等、字符串
第六章 类型 相等 转换等 一.类型 1 typeof(); typeof是一个内置的JavaScript运算符,可用于探测其操作数的类型. 例: <script language=" ...
- 【视频编解码·学习笔记】4. H.264的码流封装格式 & 提取NAL有效数据
一.码流封装格式简单介绍: H.264的语法元素进行编码后,生成的输出数据都封装为NAL Unit进行传递,多个NAL Unit的数据组合在一起形成总的输出码流.对于不同的应用场景,NAL规定了一种通 ...
- 搭建Git工作环境
为什么要做版本控制? 在平时的工作中,经常会遇到写文档的事情,而写文档基本都不会一蹴而就,总是会修修改改很多次,而版本控制能够记录每次修改的版本,能够进行回溯.有很多版本控制工具,但是作为一个程序员, ...
- 阿里IPO法律咨询费达1580万美元 为Facebook六倍
据路透社报道,阿里巴巴集团周五在 IPO (首次公开招股)更新文件中披露,将向美国盛信律师事务所(Simpson Thacher)以及其他为 IPO 提供咨询服务的律师事务所支付 1580 万美元的法 ...
- SQL行列轉換方法(詳細例子)
普通行列转换(version 1.0)仅针对sql server 2000提供静态和动态写法,version 2.0增加sql server 2005的有关写法. 问题:假设有张学生成绩表(tb)如下 ...