ps矢量图是什么意思

一、什么是ps矢量图 在设计上，矢量图是一种基于数学公式的图形，它由各种曲线、线段和多边形组成，可以直接以数学函数的形式描述，一般来说矢量图是以点、线、面、曲线等几何图形描述的，也叫向量图，与位图相应。在PS软件中，矢量图的表示方式是以路径和曲线为基础构建，同时矢量图可以实现无限放大和缩小而不失真，保证图片在任何大小下都可以清晰显示。 示例代码：

HTML5 SVG基础路径与曲线

二、矢量图的主要特点 1、根据数学公式描述，缩放不失真：矢量图可以通过数学公式来描述图像，不依赖像素，所以可以无限放大而不失真，这也是矢量图成为设计师和制作印刷品的首选。 2、输出质量可靠：由于矢量图是根据数学公式生成的，不依赖于分辨率和像素，所以可以保证输出质量在任何情况下都是一致的。所以多用于企业证书、标识或图标这类对质量和分辨率要求较高的设计。 3、编辑和修改方便：在PS软件中可以很灵活地编辑和修改矢量图，增加和删除路径、移动点都比较容易，对于在设计中经常需要修改图像的情况矢量图更加方便。 示例代码：

HTML Canvas绘制矢量图

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();

三、矢量图的类型 1、静态矢量图：静态矢量图指的是一次性画成即无法再修改，例如PS软件中的形状图在创建时必须确定其大小并完成绘制，之后无法直接修改，必须删除后重新画。 2、动态矢量图：动态矢量图指得是在运行时才会动态生成的，可以随时根据用户输入绘制图案，例如数据可视化模块中的图表，可以随着数据的变化而动态更新，在SVG动画中也有广泛的应用。 示例代码：

HTML5 SVG动画

四、矢量图和位图的区别 矢量图和位图的最主要的区别在于描述语言不同，矢量图使用的是几何数、线段、多边形等数学语言，而位图则是直接将图像分割为像素来描述。另外由于矢量图是直接描述形状的，所以无论是放大还是缩小，输出质量都会保持不变；而位图会在放大时出现锯齿、在缩小时会损失像素信息。 示例代码：

HTML5 canvas绘制位图

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0);
};
img.src = 'image.png';