HTML5 创建热点图

通过HTML5 canvas画布创建简单的热点图,当鼠标划过时产生热点,停留时间越长,热点亮度越高。

下面是HTML部分:

<!DOCTYPE html>
<html>
  <head></head>
  <style type="text/css">
    #heatmap {
      background-image: url("mapbg.jpg");
    }
  </style>
  <body>
    <canvas id="heatmap" class="clear" width="300" height="300"></canvas>
    <button id="resetButton">Reset</button>
  </body>
</html>

 

接着进行变量声明及初始化:

<script type="text/javascript">
    var points = {}; // 保存每个点击点的值,用于选取颜色
    var SCALE = 3; // 缩放比例,为使保存在points中的坐标点在一定范围内
    
    // 初始化x,y   
    var x = -1; 
    var y = -1;
</script>

 

接着是绘制热点图主函数方法:

function drawHeatMap() {
      document.getElementById("resetButton").onclick = reset; //点击button使调用reset函数。
      

      // 根据id获取canvas并获取其上下文
      canvas = document.getElementById("heatmap");
      context = canvas.getContext("2d");

      // 为canvas设置一个高透明度
      context.globalAlpha = 0.2;
      // 设置混合模式,源图像与目标图像混合
      context.globalCompositeOperation = "lighter";


      // 绘图后,每个0.1秒热点加亮
      function lighten() {
        if (x != -1) {
          addToPoint(x, y);
        }
        setTimeout(lighten, 100);
      }

      // 在canvas画布中获取鼠标坐标(相对于画布)
      canvas.onmousemove = function(e) {
        x = e.clientX  - e.target.offsetLeft;
        y = e.clientY  - e.target.offsetTop;

        addToPoint(x, y);
      }

      // 移出canvas画布后停止热点加亮
      canvas.onmouseout = function(e) {
        x = -1;
        y = -1;
      }

      lighten();
    }

获取canvas画布绘图的鼠标坐标为:x = e.clientX - e.target.offsetLeft;  因为clientX是鼠标相对于窗口的位置,而绘图是基于canvas坐标基准的,所以要减去鼠标点击目标的offsetLeft(即减去margin,padding的left值,使其为相对于canvas的坐标值)。

 

reset函数:

    function reset() {
      points = {};
      context.clearRect(0, 0, 300, 300);
      x = -1;
      y = -1;
    }

调用canvas的claerRect函数,将整个canvas区域清空并重制。

 

getColor函数:

function getColor(intensity) {
      var colors = ["#072933", "#2E4045", "#8C593B", "#B2814E", "#FAC268", "#FAD237"];
      return colors[Math.floor(intensity/2)]; // colors数组下标最大值为5,故intensity <= 11
    }

 

drawPoint函数,使用context.arc根据特定半径绘制园。

    function drawPoint(x, y, radius) {
      context.fillStyle = getColor(radius);
      radius = Math.sqrt(radius)*6;
      
      context.beginPath();
      context.arc(x, y, radius, 0, Math.PI*2, true);

      context.closePath();
      context.fill();
    }

注:arc() 方法创建弧/曲线(用于创建圆或部分圆)。

提示:如需通过 arc() 来创建圆,请把起始角设置为 0,结束角设置为 2*Math.PI。

  • 中心:arc(100,75,50,0*Math.PI,1.5*Math.PI)
  • 起始角:arc(100,75,50,0,1.5*Math.PI)
  • 结束角:arc(100,75,50,0*Math.PI,1.5*Math.PI)

 

addToPoint函数,每次移动鼠标或悬停都会调用这个函数。设置最高热度值为10。

function addToPoint(x, y) {

      x = Math.floor(x/SCALE);
      y = Math.floor(y/SCALE);

      if (!points[[x, y]]) {
        points[[x, y]] = 1;
      } else if(points[[x, y]] == 10) {
        return;
      } else {
        points[[x, y]]++;
      }
      drawPoint(x*SCALE, y*SCALE, points[[x, y]]);
    }

最后注册一个loadDemo函数,窗口加载完毕后调用

window.addEventListener("load", drawHeatMap, true);

 

最后完整代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3   <head></head>
 4   <style type="text/css">
 5     #heatmap {
 6       background-image: url("mapbg.jpg");
 7     }
 8   </style>
 9   <body>
10     <canvas id="heatmap" class="clear" width="300" height="300"></canvas>
11     <button id="resetButton">Reset</button>
12   </body>
13   <script type="text/javascript">
14     var points = {};
15     var SCALE = 3;
16     var x = -1;
17     var y = -1;
18 
19     function drawHeatMap() {
20       document.getElementById("resetButton").onclick = reset;
21       
22       canvas = document.getElementById("heatmap");
23       context = canvas.getContext("2d");
24       context.globalAlpha = 0.2;
25       context.globalCompositeOperation = "lighter";
26 
27       function lighten() {
28         if (x != -1) {
29           addToPoint(x, y);
30         }
31         setTimeout(lighten, 100);
32       }
33 
34       canvas.onmousemove = function(e) {
35         x = e.clientX  - e.target.offsetLeft;
36         y = e.clientY  - e.target.offsetTop;
37 
38         addToPoint(x, y);
39       }
40 
41       canvas.onmouseout = function(e) {
42         x = -1;
43         y = -1;
44       }
45 
46       lighten();
47     }
48 
49     function reset() {
50       points = {};
51       context.clearRect(0, 0, 300, 300);
52       x = -1;
53       y = -1;
54     }
55 
56     function getColor(intensity) {
57       var colors = ["#072933", "#2E4045", "#8C593B", "#B2814E", "#FAC268", "#FAD237"];
58       return colors[Math.floor(intensity/2)];
59     }
60 
61     function drawPoint(x, y, radius) {
62       context.fillStyle = getColor(radius);
63       radius = Math.sqrt(radius)*6;
64       
65       context.beginPath();
66       context.arc(x, y, radius, 0, Math.PI*2, true);
67 
68       context.closePath();
69       context.fill();
70     }
71 
72 
73     function addToPoint(x, y) {
74 
75       x = Math.floor(x/SCALE);
76       y = Math.floor(y/SCALE);
77 
78       if (!points[[x, y]]) {
79         points[[x, y]] = 1;
80       } else if(points[[x, y]] == 10) {
81         return;
82       } else {
83         points[[x, y]]++;
84       }
85       drawPoint(x*SCALE, y*SCALE, points[[x, y]]);
86     }
87 
88     window.addEventListener("load", drawHeatMap, true);
89     
90 
91   </script>
92 </html>
View Code

 

HTML5 创建热点图,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。