HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析


Posted in HTML / CSS onJanuary 30, 2013

到目前为止,SVG与Canvas的主要特性均已经总结完毕了。它们都是HTML5中支持的2D图形展示技术,而且均支持向量图形。现在,我们就来比对一下这两种技术,分析一下它们的长处和适用场景。
首先分析一下两种技术的显著特点,看下面的表格: 

Canvas SVG
基于像素(动态 .png) 基于形状
单个 HTML 元素 多个图形元素,这些元素成为 DOM 的一部分
仅通过脚本修改 通过脚本和 CSS 修改
事件模型/用户交互颗粒化 (x,y) 事件模型/用户交互抽象化 (rect, path)
图面较小时、对象数量较大 (>10k)(或同时满足这二者)时性能更佳 对象数量较小 (

从上面的对比中可以看出:Canvas在像素操作方面有着强大的优势;而SVG的最大优势在于便捷的交互性和可操作性。使用Canvas受画布的尺寸(其实就是像素数目)影响很大,使用SVG受对象的数目(元素的数目)影响比较大。Canvas 和 SVG 在修改方式上还存在着不同。绘制 Canvas 对象后,不能使用脚本和 CSS 对它进行修改。而 SVG 对象是文档对象模型的一部分,所以可以随时使用脚本和 CSS 修改它们。
实际上Canvas 是基于像素的即时模式图形系统,绘制完对象后不保存对象到内存中,当再次需要这个对象时想,需要重新绘制;SVG 是基于形状的保留模式图形系统,绘制完对象后会将其保存在内存中,当需要修改这个对象信息时,直接修改就可以了。这种根本的区别导致了很多应用场景的不同。

在下面的几个常见应用中,我们也可以体会到这一点。
高保真的文档
这个方面很好理解,为了浏览文档时,缩放时不失真,或需要打印高质量的文档,通常会优先选择SVG,例如地图服务。
静态的图片资源
SVG常常用于简单图像,无论是应用程序还是网页中的图像,大图像还是小图像。由于SVG要加载到DOM中,或者创建图像前至少要进行解析,所以性能会稍微有所下降,但相比于呈现网页的成本(大约几毫秒),这种效率损失是极其微小。
在文件大小方面(为了评估网络流量的目的),SVG图片与png图片大小相差也不大。但是因为SVG作为图像格式是可缩放的,所以如果开发人员想要以更大的比例使用该图像,或者用户使用高 DPI的屏幕,则使用SVG是相当不错的选择。

像素操作
使用Canvas时可以获得快速的绘图速度,且不需要保留元素的相应信息。特别是当需要处理像素操作时,性能较好。这种类型的应用基本都选择Canvas技术。
实时数据
Canvas非常适合非交互的实时数据可视化。比如实时天气数据。
图表和图形
使用SVG或者Canvas均可以绘制相关图形和图表,但是如果要强调可操作性,则SVG无疑是最好选择,如果不需要交互性,强调性能,则Canvas比较适合。
二维游戏
因为游戏大多数是使用低级的API开发,所以Canvas比较容易让人接受。但是实际上,绘制游戏的场景的时候,Canvas需要重复绘制和定位形状,而SVG是维护在内存中,修改相关的属性非常容易,所以SVG也是一种不错的选择。
在小游戏板上使用几个对象创建游戏时,Canvas 和 SVG 之间在性能上几乎没有差异。但是,随着创建更多的对象,Canvas 代码将会增大许多。由于每次进行游戏循环时都必须重新绘制 Canvas 对象,因此 Canvas 游戏的速度会减慢。
用户界面设计
由于良好的交互性,无疑SVG更胜一筹。利用 SVG 的保留模式图形显示,你可以在正文的类似 HTML 的标记中创建所有用户界面详细信息。因为每个 SVG 元素和子元素都可以响应单独的事件,所以你可以非常轻松地创建复杂的用户界面。而 Canvas 需要你按照更复杂的代码顺序来指定如何创建用户界面的每个部分。你需要遵照的顺序是:
•获取上下文。
•开始绘制。
•指定每根线条和每个填充的颜色。
•定义形状。
•完成绘制。
此外,Canvas 只能处理整个画布的事件。如果有更复杂的用户界面,则必须确定在画布上单击的位置的坐标。SVG 可以单独处理每个子元素的事件。

下面两个例子分别说明了canvas与svg各自的技术优势:

canvas的典型应用如绿屏:http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/canvasgreenscreen.htm

效果图如下:

HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析

打开页面以后可以查看页面源代码。

这个应用是从两个视频中读写像素到另一个视频中,代码使用两个视频、两个画布和一个最终画布。一次捕捉视频上的一帧,然后绘制到两个单独的画布上,这样允许读回数据:

复制代码
代码如下:

ctxSource1.drawImage(video1, 0, 0, videoWidth, videoHeight);
ctxSource2.drawImage(video2, 0, 0, videoWidth, videoHeight);

因此,下一步是检索每个绘制图像的数据,以便可以检查每个单独的像素:
复制代码
代码如下:

currentFrameSource1 = ctxSource1.getImageData(0, 0, videoWidth, videoHeight);
currentFrameSource2 = ctxSource2.getImageData(0, 0, videoWidth, videoHeight);

获取后,代码将浏览绿屏的像素数组,搜索绿色像素,如果找到,代码将用背景场景中的像素替换所有绿色像素。:
复制代码
代码如下:

for (var i = 0; i < n; i++)
{
// Grab the RBG for each pixel:
r = currentFrameSource1.data[i * 4 + 0];
g = currentFrameSource1.data[i * 4 + 1];
b = currentFrameSource1.data[i * 4 + 2];

// If this seems like a green pixel replace it:
if ( (r >= 0 && r <= 59) && (g >= 74 && g <= 144) && (b >= 0 && b <= 56) ) // Target green is (24, 109, 21), so look around those values.
{
pixelIndex = i * 4;
currentFrameSource1.data[pixelIndex] = currentFrameSource2.data[pixelIndex];
currentFrameSource1.data[pixelIndex + 1] = currentFrameSource2.data[pixelIndex + 1];
currentFrameSource1.data[pixelIndex + 2] = currentFrameSource2.data[pixelIndex + 2];
currentFrameSource1.data[pixelIndex + 3] = currentFrameSource2.data[pixelIndex + 3];
}
}


最后,像素数组将写入到目标画布中:
复制代码
代码如下:

ctxDest.putImageData(currentFrameSource1, 0, 0);

svg典型的应用如用户界面
复制代码
代码如下:

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript">
// This function is called when the circle is clicked.
function clickMe() {
// Display the alert.
alert("You clicked the SVG UI element.");
}
</script>
</head>
<body>
<h1>
SVG User Interface
</h1>
<!-- Create the SVG pane. -->
<svg height="200" width="200">
<!-- Create the circle. -->
<circle cx="100" cy="100" r="50" fill="gold" id="uIElement" onclick="clickMe();"
/>
</svg>
<p>
Click on the gold circular user interface element.
</p>
</body>
</html>


这个例子虽然简单,但是具备了用户界面的一切特性,从这个例子中我们再次领略了svg便捷的交互性。

最后用一幅图来总结一下每种应用适合的技术,图中每个方块代表一类应用,越靠近某一端,说明采用该技术越具有的优势:

 HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析

实用参考:
脚本索引:http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
开发中心:https://developer.mozilla.org/en/SVG
热门参考:http://www.chinasvg.com/
官方文档:http://www.w3.org/TR/SVG11/

HTML / CSS 相关文章推荐
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
Nov 01 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 HTML / CSS
HTML5 Canvas像素处理使用接口介绍
Dec 02 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
Jan 30 HTML / CSS
详解HTML5中表单验证的8种方法介绍
Dec 19 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
Mar 15 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 #HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 #HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
Jan 30 #HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 #HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
Jan 30 #HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 #HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
Jan 30 #HTML / CSS
You might like
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
Javascript String.replace的妙用
2009/09/08 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
python基础教程之字典操作详解
2014/03/25 Python
Python去除列表中重复元素的方法
2015/03/20 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
Django静态文件加载失败解决方案
2020/08/26 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
《胡杨》教学反思
2014/02/16 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
秋收起义观后感
2015/06/11 职场文书
初中军训感言
2015/08/01 职场文书
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python