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

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

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

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

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

store(hmap){ 7 var _ = { data: [], heatmap: hmap 15 }; .max = 1; 19 this.get = function(key){ 20 return _[key]; 21 }, 22 this.set = function(key, value){ 23 _[key] = value; 24 }; 25 };

 

在model里面，支持一次添加一个数据点。这也是heatmapjs支持实时绘制的关键。一旦max值有变化就会重新绘制整个canvas。

addDataPoint: function(x, y){ if(x < 0 || y < 0) return; var me = this, heatmap = me.get("heatmap"), data = me.get("data"); if(!data[x]) data[x] = []; if(!data[x][y]) data[x][y] = 0; // if count parameter is set increment by count otherwise by 1 data[x][y]+=(arguments.length me.set("data", data); (me.max < data[x][y]){ me.max = data[x][y]; // max changed, we need to redraw all existing(lower) datapoints heatmap.get("actx").clearRect(0,0,heatmap.get("width"),heatmap.get("height")); for(var one in data) for(var two in data[one]) heatmap.drawAlpha(one, two, data[one][two]); ; } heatmap.drawAlpha(x, y, data[x][y]); },

 

下面就是画的部分了。这里是最重要的两个方法，drawAlpha colorize

drawAlpha: function(x, y, count){ me = this, r1 = me.get("radiusIn"), r2 = me.get("radiusOut"), ctx = me.get("actx"), max = me.get("max"), rgr = ctx.createRadialGradient(x,y,r1,x,y,r2), xb = x-r2, yb = y-r2, mul = 2*r2; // the center of the radial gradient has .1 alpha value rgr.addColorStop(0, 'rgba(0,0,0,'+((count)?(count/me.store.max):'0.1')+')'); // and it fades out to 0 rgr.addColorStop(1, 'rgba(0,0,0,0)'); // drawing the gradient ctx.fillStyle = rgr; ctx.fillRect(xb,yb,mul,mul); // finally colorize the area me.colorize(xb,yb); },

 

策略很简单，

rgr.addColorStop(0, 'rgba(0,0,0,'+((count)?(count/me.store.max):'0.1')+')'); // and it fades out to 0 rgr.addColorStop(1, 'rgba(0,0,0,0)');

 

利用当前点的count除以最大的count获取的结果做为alpha值。然后做一个RadialGradient画出来这个图就可以了。那么由于多个相近的点aphla效果的叠加就可以获取想要的效果了。这里就是canvas的nb之处了，看别的语言实现都是采用将一个这样的png图片画到画板上，但是canvas就可以直接实现这个效果。

有了这幅aphla版本的heatmap 我们利用一个配送版做着色就大功告成了。

这里又用到了上面所说的canvas的nb之处，在通常需要一个图片作为配色板的时候canvas可以自己做出来一个缓存起来。

initColorPalette: function(){ var me = this, canvas = document.createElement("canvas"); canvas.width = "1"; canvas.height = "256"; var ctx = canvas.getContext("2d"), grad = ctx.createLinearGradient(0,0,1,256), gradient = me.get("gradient"); for(var x in gradient){ grad.addColorStop(x, gradient[x]); } ctx.fillStyle = grad; ctx.fillRect(0,0,1,256); //这里太强大了，缓存了我的画板数据，然后删除了画板 me.set("gradient", ctx.getImageData(0,0,1,256).data); delete canvas; delete grad; delete ctx; },

 

这种方式也给我们实现各种各样的配色提供了方便，我们只需要改变那个 **gradient** 就可以了。