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 ...
随机推荐
- 海面波浪模拟 MATLAB
数学建模美赛集训的时候要用到一个海面模拟,分享一下海面模拟的MATLAB代码 先贴一下结果图: 下面是源代码~~~ function waterwave n = 64; % grid size g = ...
- 《Java核心技术36讲》阅读笔记:Exception和Error有什么区别?
1.Exception 和 Error有什么区别?运行时异常与一般异常有什么区别? Exception和Error都继承自java.lang.Throwable.在Java中只有Throwable的实 ...
- hadoop errors
1.taskTracker和jobTracker 启动失败 2011-01-05 12:44:42,144 ERROR org.apache.hadoop.mapred.TaskTracker: Ca ...
- 20155321 2016-2017-2 《Java程序设计》第一周学习总结
学习目标 [√]了解Java基础知识 [√]了解JVM.JRE与JDK,并下载.安装.测试JDK [√]了解PATH.CLASSPATH.SOURCEPATH的作用并会设置 [√]初步使用IDE(推荐 ...
- 系统分析与设计——WordCount
成果: https://gitee.com/ZMLJZ/codes/0k19q4upgmrfde265l7vx36 作业要求: 根据WordCount的需求描述,先编程实现,再编写单元测试,最后撰写博 ...
- Java——RMI
之前分布式系统调用用的是比较老的EJB,当时还是作为服务调用方,去调用别的系统的服务.最近发现新公司里面,用的是RMI,查了下发现EJB的底层实现就是RMI,也算是熟悉了... 一,使用JDK 中的R ...
- 【LG5019】[NOIP2018]道路铺设
[LG5019][NOIP2018]道路铺设 题面 洛谷 题解 \(NOIP\) 抄 \(NOIP\)差评 设当前做到了位置\(i\) 且\(h_i\) \(-\) \(h_i\)\(_+\)\(_1 ...
- javaweb(三十七)——获得MySQL数据库自动生成的主键
测试脚本如下: 1 create table test1 2 ( 3 id int primary key auto_increment, 4 name varchar(20) 5 ); 测试代码: ...
- 七、EnterpriseFrameWork框架基础功能之字典数据配置管理
框架中的“通用字典数据配置管理”主要解决的问题是,所有的行业软件给客户实施第一步一般都是基础数据的维护,一个系统的字典是少不了的,涉及业务范围越广字典就越多,如果每一个字典数据都做一个界面来进行维护数 ...
- JavaScript 中函数的参数
functionName(parameter1, parameter2, parameter3) { // 要执行的代码…… } 参数规则 JavaScript 函数定义时形参没有指定数据类型. Ja ...