H5新增特性-canvas和svg的异同

简介：

在HTML5中，新增了canvas和svg元素，它们都可以在浏览器中创建图像，在H5中看似canvas与svg很像，但是，他们有着根本的区别。

canvas

Canvas是HTML5中提供的新元素，通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。绘制的是位图，如果进行放大操作，会导致失真。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

SVG

svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

在H5标准之前的使用方法：
SVG标签不能直接书写在网页中，只能编写在独立的XML文档中；

网页中使用< img src=“x.svg”>进行嵌入

纳入H5标准后的使用方法：SVG标签可以直接书写在网页中。

canvas和svg的区别：

1.canvas绘制的是位图，放大会失真，svg绘制的矢量图，保存的是路径，可以无限放大而不会失真。
2Canvas是JS绘图技术(不是DOM元素)；SVG是标签绘图技术(是DOM元素)，svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布,不方便绑定事件处理；
3.Canvas和SVG在修改方式不同。绘制Canvas对象后，不能使用脚本和 CSS 对它进行修改。因为 SVG 对象是文档对象模型的一部分，所以可以随时使用脚本和 CSS 修改它。