【 可视化】热力图绘制原理

网上那些炫酷的热力图是如何绘制的? 相信你也很好奇，本文将以 canvas 作为绘图示例来讲解热力图的原理。

透明度

我们经常遇到透明度的概念，如 CSS 中的 opacity 属性、rgba 颜色中的 alpha 变量、canvas 中的 globalAlpha 属性等。

它们的取值范围一般是 0-1 之间，0 表示完全透明，1 表示不透明，值越小，越透明。

透明度叠加

思考一个问题： 透明度为 0.2 的矩形跟透明度为 0.6 的矩形叠加后的透明度为多少？

结果可以看以下示例，通过 canvas 的 getImageData 方法输出了叠加后的透明度（值除以 255 即可）

See the Pen canvas-opacity by linghuam (@linghuam) on CodePen.

很多人的第一感觉也许是 0.8，其实这是一种想当然的理解。正确的思路如下：