首页 > 代码库 > HTML5 创建热点图
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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。