使用canvas api可以创建许多种应用:图形、图表、图片编辑等,然而最奇妙的一个应用 是修改或者覆盖已有内容。最流行的覆盏图被称为热点图。虽然热点图听起来是度量温度的意思, 不过这里的热度可以用于任何可测量的活动。地图上活跃程度髙的部分使用暖色标记(例如红色、 黄色或白色),活跃程度低的部分不显示颜色变化,或者显示浅浅的黑色或灰色。
举个例子,热点图可以用在城市地图上来标记交通路况,或者在世界地图上显示风暴的活动情况。
在html5中这些应用都非常容易实现,只需要将carwas叠放在地图上显示即可。实际上 就是用canvas覆盖地图,然后再基于相应的活动数据绘制出不同的热度级别。
现在,我的使用已经学过的canvas api知识来绘制一个简单的热点图。这个示例中,热度 数据不是来源于外部,而是来廉于我们的鼠标在地图上的移动情况?鼠标移动到某个区域,会使 这个区域的“热度”增加。将鼠标放在特定区域不动会让该区域“温度”迅速增长至极限。为了 示范,我们将在一个“难以名状”的地图上进行热点图的覆盖演示。