《JavaScript高效图形编程(修订版)》——6.2 位图、矢量图,或两者兼而有之?

  1. 云栖社区>
  2. 博客>
  3. 正文

《JavaScript高效图形编程(修订版)》——6.2 位图、矢量图,或两者兼而有之?

异步社区 2017-05-02 13:36:00 浏览714
展开阅读全文

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

6.2 位图、矢量图,或两者兼而有之?

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

矢量图

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

位图

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

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

网友评论

登录后评论
0/500
评论
异步社区
+ 关注