HTML5中Canvas与SVG的画图原理比较

canvas 与 SVG都能够使你在浏览器中画图,但它们的基本原理不同,接下来将对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很多的情况都会变慢)
最适合许多 对象频繁重画的图形游戏        不适合游戏应用
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

HTML5 火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把。 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是几个实例,记下以备后用。 1、使用Canvas绘制直线: !doctype html ht
这篇文章主要介绍了利用HTML5 Canvas制作键盘及鼠标动画的实例,文中分别分享了一个键盘控制的小球移动和鼠标触发的小丑小脸例子,需要的朋友可以参考下
这篇文章主要介绍了通过HTML5 Canvas API绘制弧线和圆形的教程,用JavaScript可以自定义弧度以及设定起始终末点,使用JavaScript需要的朋友可以参考下
这篇文章主要为大家详细介绍了HTML5 canvas实现移动端上传头像拖拽裁剪效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
这篇文章主要为大家详细介绍了html5 canvas移动浏览器上实现图片压缩上传的相关方法,提出了解决方法,分享了解决问题的思路,感兴趣的小伙伴们可以参考一下
这是一个款绚丽的HTML5 Canvas动画,它将模拟的是我们生活中烟花绽放的动画特效,效果非常逼真,下面我们来简单分析一下实现这款HTML5烟花特效的过程及代码,感兴趣的小伙伴们可以参考一下