《JavaScript高效图形编程（修订版）》——6.2 位图、矢量图，或两者兼而有之？...

本节书摘来自异步社区《JavaScript高效图形编程（修订版）》一书中的第6章，第6.2节，作者：【美】Raffaele Cecco著，更多章节内容可以访问云栖社区“异步社区”公众号查看

6.2 位图、矢量图，或两者兼而有之？

画布为不同的应用，设计了一个小而精的矢量图和位图命令集。两者之间的区别是什么？

矢量图

矢量图形由直线和曲线的数学表示定义。你可以填充矢量形状或/和描绘其轮廓。矢量图形的关键优势在于它们可以缩放到任意大小而不损失质量：边缘和细节依旧锋利。矢量图最适合单色或渐变区域面积较大、细节密度较小的图像。最典型的有：图表、图形、旗帜、线路图和卡通风格的图像。因为其数学特性，JavaScript操作矢量图特别方便。

位图

位图图像（如无所不在的JPEG格式）是不同颜色的像素组成的网格。它们不能很好地进行缩放，当放大时将看到明显的方块，而缩小时将损失信息。这是因为单个像素不是被放大了就是被丢失了。有些画布实现可以通过使用模糊滤波来降低这种不良效应。位图最适用于有着大量细节的摄影风格的图像。

警告：
无论如何生成图像，画布最终可视的输出结果始终是位图。如果你要利用矢量缩放的优势，你需要使用矢量图命令在新的尺度下重绘图像。仅仅使用浏览器交互或CSS来放大画布，其效果和放大位图图像一样：会有块状/模糊效应。