HTML5中Canvas与SVG的画图原理比较
发布时间：2013-01-16 18:18:29 作者：佚名 
我要评论
我要评论canvas 与 SVG都能够使你在浏览器中画图，但它们的基本原理不同,接下来将对canvas 与 SVG的画图原理进行介绍，感兴趣的朋友可以了解下
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
canvas 与 SVG都能够使你在浏览器中画图，但它们的基本原理不同。
SVG
SVG是一种在XML中描述二维图形的语言。
SVG是基于XML的，意味着在SVG DOM内每一个元素都是可用的。你可以为每一个元素增加JS事件处理器。
在SVG中，每一个图形被记作一个对象。如果一个SVG对象的属性发生改变，浏览器可以自动重新生成图形。
Canvas
Canvas能够在fly上画2D图形（使用JS）
Canvas能够按照像素重新生成。
在Canvas中，一旦图形完成，就会被浏览器忘记。如果图形位置要发生改变，那么整个屏幕需要重画，包括图形覆盖的对象。
Canvas 和SVG的比较
下表显示了canvas与SVG的主要不同点：
SVG
SVG是一种在XML中描述二维图形的语言。
SVG是基于XML的，意味着在SVG DOM内每一个元素都是可用的。你可以为每一个元素增加JS事件处理器。
在SVG中，每一个图形被记作一个对象。如果一个SVG对象的属性发生改变，浏览器可以自动重新生成图形。
Canvas
Canvas能够在fly上画2D图形（使用JS）
Canvas能够按照像素重新生成。
在Canvas中，一旦图形完成，就会被浏览器忘记。如果图形位置要发生改变，那么整个屏幕需要重画，包括图形覆盖的对象。
Canvas 和SVG的比较
下表显示了canvas与SVG的主要不同点：
| Canvas | SVG |
| 依赖分辨率 | 独立于分辨率 |
| 不支持事件处理器 | 支持事件处理器 |
| 弱文本渲染能力 | 最适合具有大渲染面积的应用（谷歌地图） |
| 可以保存最终图片为PNG或者JPG | 复杂图像，重画变慢（任何使用DOM很多的情况都会变慢） |
| 最适合许多 对象频繁重画的图形游戏 | 不适合游戏应用 |
相关文章
详解FireFox下Canvas使用图像合成绘制SVG的Bug
这篇文章主要介绍了详解FireFox下Canvas使用图像合成绘制SVG的Bug，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-07-10- 需要把网页部分内容做正文，并把原网页转成pdf作为附件，发送邮件给boss，将svg转成canvas显示，但是后来发现canvas也无法正常显示，最后不得已，只能将canvas标签再一次转2014-01-24
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
到目前为止，SVG与Canvas的主要特性均已经总结完毕了,现在，我们就来比对一下这两种技术，分析一下它们的长处和适用场景,感兴趣的朋友可以了解下哦，或许对你有所帮助2013-01-30- Canvas和SVG都是HTML5中的图形渲染技术，那么你知道这两种有哪些区别吗，本文就详细的介绍一下，感兴趣的可以了解一下2023-05-11
最新评论