SVG

 

　　SVG是一种使用XML描述2D图形的语言，它基于XML也就是我们可以为某个元素附加JavaScript事件处理器，如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。

 

　　Canvas

 

　　Canvas通过JavaScript来绘制2D图形。它是逐像素进行渲染的，一旦图形被绘制完成，如果它的位置发生了变化，那么整个场景都需要重新绘制，包括任何或者已经被覆盖的对象

 

　　SVG与canvas的区别

 

　　（1）SVG是用来描述XML中2D图形的语言，canvas借助JavaScript动态描绘2D图形

 

　　（2）SVG可支持事件处理程序而canvas不支持

 

　　（3）SVG中属性改变时，浏览器可以重新呈现它，适用于矢量图，而canvas不可以，更适合视频游戏等。

 

　　（4）canvas可以很好的绘制像素，用于保存结果为png或者gif,可做为API容器。

 

　　（5）canvas取决于分辨率。SVG与分辨率无关。

 

　　（6）SVG具有更好的文本渲染，而Canvas不能很好的渲染，渲染中的SVG可能比Canvas慢，特别是应用了大量的DOM。

 

　　（7）画布更适合渲染较小的区域。SVG渲染更好的更大区域。

 

　　SVG与canvas之间的比较

 

　　SVG canvas

 

　　可扩展

 

　　不可扩展

 

　　支持DOM和事件 没有事件支持

 

　　不依赖分辨率 分辨率依赖

 

　　在渲染复杂区域时可能会更慢 不适合较大或复杂的区域

 

　　呈现更好更大的区域（DOM除外） 渲染更小的区域

 

　　更好的矢量图形 更适合动画（视频）和图像

 

　　不适合API 适合API

 

　　很好地呈现文本 不能很好地呈现文本

 

　　案例分析

 

　　canvas绘制一个圆

 

　　<canvasid="circle"></canvas>

 

　　<scripttype="text/javascript">

 

　　varcircle=document.getElementById("circle");

 

　　varyuan=circle.getContext("2d");

 

　　yuan.beginPath();

 

　　yuan.strokeStyle="pink";

 

　　yuan.arc(50,50,50,0,Math.PI*2,true);

 

　　yuan.stroke();

 

　　</script>






本文转载自中文网