如何为热图创建强度模板?

时间:2013-02-19 08:59:11

标签: html5 gwt colors html5-canvas heatmap

我正在尝试开发热图,现在我最初必须绘制强度蒙版,因为我使用GWT所以我随机生成了一些坐标并将我的圆圈(具有所需的渐变度)放置在那些位置输出结果是相互重叠的圆圈。如果我从Dylan Vester看一下强度模板,它会变得很光滑我怎么能画出我的热图?还有如何实现与Dylan Vester相似的输出?问题还在于,如果我画圆圈然后如何确定两个或更多圆圈交叉处的强度,它们是如何实现的?这是我的代码

// creating the object for the heat points
        Heat_Point x = new Heat_Point();

    // Variables for random locations
        int Min = 1,Max = 300;
        int randomx,randomy;

    // Generating set of random values
        for( int i = 0 ; i < 100 ; i++ ) {

            // Generating random x and y coordinates
                randomx = Min + (int)(Math.random() * ((Max - Min) + 1));
                randomy = Min + (int)(Math.random() * ((Max - Min) + 1));

            // Drawing the heat points at generated locations 
                x.Draw_Heatpoint(c1, randomx, randomy);


        }

以下是我如何绘制我的热点,即Heat_Point类

Context con1 = c1.getContext2d(); // c1 is my canvas
CanvasGradient x1;
x1 = ((Context2d) con1).createRadialGradient(x,y,10,x,y,20);
x1.addColorStop(0,"black");
x1.addColorStop(1,"white");
((Context2d) con1).beginPath();
((Context2d) con1).setFillStyle(x1);
((Context2d) con1).arc(x,y,20, 0, Math.PI * 2.0, true);
((Context2d) con1).fill();
((Context2d) con1).closePath();`

这里我应该添加一些图片,但我没有足够的声誉:D:P

1 个答案:

答案 0 :(得分:0)

我快速浏览了HeatmapJS(http://www.patrick-wied.at/static/heatmapjs/)并且看起来他使用了径向渐变(就像你上面所做的那样)并且他还使用了不透明度和一个名为“乘法混合”的滤色器来平滑强度热图中的颜色。

他的代码令人印象深刻。它是开源的,所以你可能想看看它!

相关问题