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

SVGcanvas
可扩展
不可扩展
支持DOM和事件没有事件支持
不依赖分辨率分辨率依赖
在渲染复杂区域时可能会更慢不适合较大或复杂的区域
呈现更好更大的区域(DOM除外)渲染更小的区域
更好的矢量图形更适合动画(视频)和图像
不适合API适合API
很好地呈现文本不能很好地呈现文本

案例分析

canvas绘制一个圆



HTML5中canvas与SVG有哪些区别

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

SVG绘画一个圆




HTML5中canvas与SVG有哪些区别

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

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


当前名称:HTML5中canvas与SVG有哪些区别
文章位置:http://scyanting.com/article/poiogp.html