HTML5中canvas与SVG有什么区别

【推荐课程：HTML5教程】

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之间的比较

案例分析

canvas绘制一个圆

 canvas id= circle /canvas  script type= text/javascript  var circle=document.getElementById( circle  var yuan=circle.getContext( 2d  yuan.beginPath(); yuan.stroke >
可以看出图片放大时边框周围有锯齿
SVG绘画一个圆
 ?xml version= 1.0 standalone= no ?  svg width= 100% height= 100% version= 1.1  circle cx= 100 cy= 50 r= 40 stroke= pink stroke-width= 2 fill= #fff /  /svg 
可以看出SVG画出的图形放大不会失真。
总结：以上就是本篇文章的全部内容了，希望通过本篇文章使大家对canvas和SVG的区别有一定的了解。
以上就是HTML5中canvas与SVG有什么区别的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。