本节书摘来自异步社区《JavaScript高效图形编程(修订版)》一书中的第6章,第6.2节,作者:【美】Raffaele Cecco著,更多章节内容可以访问云栖社区“异步社区”公众号查看
6.2 位图、矢量图,或两者兼而有之?
画布为不同的应用,设计了一个小而精的矢量图和位图命令集。两者之间的区别是什么?
矢量图
矢量图形由直线和曲线的数学表示定义。你可以填充矢量形状或/和描绘其轮廓。矢量图形的关键优势在于它们可以缩放到任意大小而不损失质量:边缘和细节依旧锋利。矢量图最适合单色或渐变区域面积较大、细节密度较小的图像。最典型的有:图表、图形、旗帜、线路图和卡通风格的图像。因为其数学特性,JavaScript操作矢量图特别方便。
位图
位图图像(如无所不在的JPEG格式)是不同颜色的像素组成的网格。它们不能很好地进行缩放,当放大时将看到明显的方块,而缩小时将损失信息。这是因为单个像素不是被放大了就是被丢失了。有些画布实现可以通过使用模糊滤波来降低这种不良效应。位图最适用于有着大量细节的摄影风格的图像。
警告:
无论如何生成图像,画布最终可视的输出结果始终是位图。如果你要利用矢量缩放的优势,你需要使用矢量图命令在新的尺度下重绘图像。仅仅使用浏览器交互或CSS来放大画布,其效果和放大位图图像一样:会有块状/模糊效应。