今天将和大家分享的是有关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之间的比较
SVGcanvas可扩展
不可扩展支持DOM和事件 没有事件支持不依赖分辨率 分辨率依赖 在渲染复杂区域时可能会更慢 不适合较大或复杂的区域 呈现更好更大的区域（DOM除外） 渲染更小的区域更好的矢量图形 更适合动画（视频）和图像 不适合API 适合API 很好地呈现文本 不能很好地呈现文本
案例分析
canvas绘制一个圆
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();
可以看出图片放大时边框周围有锯齿
SVG绘画一个圆
可以看出SVG画出的图形放大不会失真。
总结：以上就是本篇文章的全部内容了，希望通过本篇文章使大家对canvas和SVG的区别有一定的了解。
以上就是HTML5中canvas与SVG有什么区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1547436.html
微信扫一扫 
支付宝扫一扫 
