canvas和svg的区别

一、svg

SVG可缩放矢量图形是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素添加JavaScript事件。在SVG中，每个被绘制的图形均被视为对象，如果SVG对象的属性发生变化，浏览器会自动重现图形。

特点：

        不依赖分辨率；

        支持js事件处理器；

        适合带有大型渲染区域的应用程序；

        复杂度高会减慢渲染速度；

        不适合游戏应用。

二、canvas

        canvas是画布，是通过JavaScript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。

注意：

        依赖分辨率；

        不支持js事件处理器；

        文本渲染能力较弱；

        能以png或jpg格式保存图像；

        适合图像密集型游戏，其中的许多对象会被频繁重绘。

三、矢量图

        矢量图也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。