Web端的绘图需求,选择SVG还是Canvas?

Web上比较流行的绘图技术主要有SVG、微软的VML以及Canvas和CSS3。每一种展开来说都是一个大课题,那么本文主要探讨一个问题:挖掘机技术到底哪家强?。。。。。。。。。。不逗逼了,说正经的:Web端的绘图需求,选择SVG还是Canvas?

Web端的绘图需求,选择SVG还是Canvas?

首先SVG和Canvas相同的地方在于都可以为用户呈现可缩放保真的矢量图形,它们都是有效的图形工具,可用来快速创建在网页中显示的轻型图形;它们都使用 JavaScript 和 HTML;它们都遵守万维网联合会 (W3C) 标准,但两者的开发模式以及适合的场景是有所区别的。

高保真度的复杂矢量文档

1.能够存储足够多的极为详细的文档,包括由CAD程序生成的那些文档,针对这些文档,SVG的scalable部分提供了独立文档形式或嵌入网页中的文档形式的详细视图。
2.通过该技术还可以进行高保真打印。SVG能很方便的在客户端或服务器端提供从数据库生成形状的能力。加上工程图(为了专利)或工业图(为了城市规划目的)缘故,这种需求会越来越多。比如:建筑图、工程图和楼层图、电子图、航空图和示意图、组织结构图、地图、生物图。
3. SVG 作为图像格式是可缩放的,所以如果开发人员想要以更大的比例使用该图像,或者用户使用高DPI的屏幕,则可移植网络图形 (PNG),如果是其它文件格式,要么会失真,要么需要更大形式的文件来实现保真。
高频率绘制的像素操作

1.使用Canvas时可以获得快速的绘图速度,且不需要保留相应信息。Canvas API允许开发人员读写像素,可通过大量的库来实现创建最终图像所需的计算。无论你是在图像中还是在数据动画中看到大量的形状(尤其是不相似的形状)要进行分析,通常都会使用Canvas。这里的实际限制是受 CPU 速度和 JavaScript 引擎速度,能多快可视化的显示数据。
2.Canvas非常适合输出实时数据,当我们没有必要存在大的绘图图面,而且屏幕上的对象数量很高的时候。通过使用 Canvas API,可以在不影响 DOM 的情况下快速绘制(和擦除)这些对象。尽管也可以使用 SVG Ellipse 完成此操作,但是将它们加载到 DOM 中以及通过动画修改它们的成本是非常高的。
3.另一个使用 Canvas 的可能情况是,在视频上进行颜色检测以便用其他场景或图像替换背景色。大家可以去看一个例子:http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/canvasgreenscreen.htm

相关阅读