什么是标量图和矢量图

在学习canvas和svg绘制图时，发现不同点一个是绘制标量图，一个是绘制矢量图。

计算机能以矢量图(vector)或位图(bitmap)格式显示[图像].理解两者的区别能帮助您更好的提高工作效率.

1. 矢量图

矢量图使用线段和曲线描述图像,所以称为矢量,同时图形也包含了色彩和位置信息.下面例子中的树叶,就是利用大量的点连接成曲线来描述树叶的轮廓线.然后根据轮廓线,在图像内部填充一定的色彩.

当您进行矢量图形的编辑时,您定义的是描述图形形状的线和曲线的属性,这些属性将被记录下来.对矢量图形的操作,例如移动,重新定义尺寸,重新定义形状,或者改变矢量图形的色彩,都不会改变矢量图形的显示品质.您也可以通过矢量对象的交叠,使得图形的某一部分被隐藏,或者改变对象的透明度.矢量图形是"分辨率独立"的,这就是说,当您显示或输出图像时,图像的品质不受设备的分辨率的影响.在例子中,右图是放大后的矢量图形,我们看见图像的品质没有受到影响.

矢量图使用直线和曲线来描述图形，这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等，它们都是通过数学公式计算获得的。例如一幅花的矢量图形实际上是由线段形成外框轮廓，由外框的颜色以及外框所封闭的颜色决定花显示出的颜色。由于矢量图形可通过公式计算获得，所以矢量图形文件体积一般较小。矢量图形最大的优点是无论放大、缩小或旋转等不会失真；最大的缺点是难以表现色彩层次丰富的逼真图像效果。AI和CDR是众多矢量图形设计软件中的佼佼者。大名鼎鼎的FlashMX制作的动画也是矢量图形动画。

2. 标量图(位图)

亦称为点阵图像或绘制图像，是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成图样。当放大位图时，可以看见赖以构成整个图像的无数单个方块。扩大位图尺寸的效果是增大单个像素，从而使线条和形状显得参差不齐。然而，如果从稍远的位置观看它，位图图像的颜色和形状又显得是连续的。

3.1 与分辨率的相关性

矢量图 与分辨率无关，可以将它缩放到任意大小和以任意分辨率在输出设备上打印出来，都不会影响清晰度。 位图 是由一个一个像素点产生，当放大图像时，像素点也放大了，但每个像素点表示的颜色是单一的，所以在位图放大后就会出现马赛克状。

3.2 色彩丰富度

矢量图 色彩不丰富，无法表现逼真的实物，矢量图常常用来表示标识、图标、Logo等简单直接的图像。 位图 表现的色彩比较丰富，可以表现出色彩丰富的图象，可逼真表现自然界各类实物。

3.3 文件类型

矢量图 格式很多，如AdobeIllustrator的 .AI、.EPS和SVG、AutoCAD的 .dwg和dxf、Corel DRAW的 .cdr等。 位图 的文件类型也很多，如 .bmp、.pcx、.gif、.jpg、.tif、.png、photoshop的 *.psd等。

3.4 占用空间

矢量图 表现的图像颜色比较单一，所以所占用的空间会很小。 位图 表现的色彩比较丰富，所以占用的空间会很大，颜色信息越多，占用空间越大，图像越清晰，占用空间越大。

3.5 相互转化

经过软件矢量图可以很轻松的转化为位图，而位图要想转换为矢量图必须经过复杂而庞大的数据处理，而且生成的矢量图质量也会有很大的出入。

下一篇文章介绍canvas和svg的区别。