HTML5中canvas与SVG有哪些区别-创新互联

这篇文章主要介绍了HTML5中canvas与SVG有哪些区别，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

成都创新互联专注为客户提供全方位的互联网综合服务，包含不限于网站制作、成都网站设计、华坪网络推广、重庆小程序开发公司、华坪网络营销、华坪企业策划、华坪品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们大的嘉奖；成都创新互联为所有大学生创业者提供华坪建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com

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绘制一个圆

可以看出图片放大时边框周围有锯齿

SVG绘画一个圆

可以看出SVG画出的图形放大不会失真。

感谢你能够认真阅读完这篇文章，希望小编分享HTML5中canvas与SVG有哪些区别内容对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，遇到问题就找创新互联，详细的解决方法等着你来学习!

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网页名称：HTML5中canvas与SVG有哪些区别-创新互联
网站网址：http://cdiso.cn/article/deiigs.html