简介:
在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 修改它。