WebGL-HeatMap - 基于webgl的热力图插件

WebGL-HeatMap

基于webgl的热力图插件

Demo

使用方法

var fackData = [];      for (var i = 0; i < 10000; i++) {          fackData.push([Math.random() * 2048, Math.random() * 900, Math.floor(Math.random() * 600)]);      }          var z = WebGLCanvas.render({          width:1024,          height:100,          radius: 18,          max: 800,          min: 100,          filter: 12      }, fackData);      for (var i = 0; i < z.length; i++) {          document.body.appendChild(z[i]);      };

可以看到插件需要的数据格式为 fackData 提供的格式。

WebGLCanvas.render(cfg,data) 方法返回的是一个多个canvas的数组。

你只需要把这些canvas append 到dom树中就行

注意 render 方法里面的 width 和 height 很可能不是最后生成的 canvas的实际尺寸，因为gl中要求每个纹理的尺寸必须是2的n次方。