WebGL-HeatMap - 基于webgl的 热力图插件
jopen
8年前
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次方。
