java生成png热力图_heatmap.js 一个用canvas画热力图的利器

heatmap.js可以使用canvas画出来一张漂亮的heatmap。更重要的是它支持数据的动态添加。比如，上图的演示就是一个利用mousemove事件生成heatmap的例子。它会自动的刷新canvas，实时显示鼠标运动的heatmap。

打开heatmap.js发现里面的代码并不多，但是真的很精悍。

页面代码请点击这里[heatmap.js]，下面我做一个code的分析吧，看了那么久了，写下来一方面是自己加深记忆，另一方面就是可以更好的理清思路吧。[写就是为了更好的思考]么。

code中包含两个主要的对象，store heatmap。store是heatmap的数据部分，算是model吧。而heatmap则是真正绘制图像的对象。heatmap部分可以被配置，可以自定义很多的内容，尤其是配色也是可以配置的，那么我们除了做出来正真的heatmap的效果之外还可以做出来各种各样不错的效果的。

首先看看存储部分吧，比较简单，注释也比较清楚。

1 //store object constructor

2 //a heatmap contains a store

3 //the store has to know about the heatmap

4 //in order to trigger heatmap updates when

5 //datapoints get added

6 functionstore(hmap){7 var _ ={8 //data is a two dimensional array

9 //a datapoint gets saved as data[point-x-value][point-y-value]

10 //the value at [point-x-value][point-y-value]

11 //is the occurrence of the datapoint

12 data: [],13 //tight coupling of the heatmap object

14 heatmap: hmap15 };16 //the max occurrence - the heatmaps radial gradient

17 //alpha transition is based on it

18 this.max = 1;19 this.get &#