今天将和大家分享的是有关javascript中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之间的比较
svg canvas
可扩展
 不可扩展
支持dom和事件    没有事件支持
不依赖分辨率    分辨率依赖 
在渲染复杂区域时可能会更慢   不适合较大或复杂的区域    
呈现更好更大的区域（dom除外）     渲染更小的区域
更好的矢量图形     更适合动画（视频）和图像   
不适合api     适合api    
很好地呈现文本  不能很好地呈现文本
案例分析
canvas绘制一个圆
<canvas id="circle"></canvas><script type="text/javascript"> var circle=document.getelementbyid("circle"); var yuan=circle.getcontext("2d"); yuan.beginpath(); yuan.strokestyle="pink"; yuan.arc(50,50,50,0,math.pi*2,true); yuan.stroke();</script>
可以看出图片放大时边框周围有锯齿
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有什么区别的详细内容。