html5中图片热点,HTML5 创建热点图

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

下面是HTML部分：

#heatmap{background-image:url("mapbg.jpg");

}

Reset

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

var points = {}; //保存每个点击点的值，用于选取颜色

var SCALE = 3; //缩放比例，为使保存在points中的坐标点在一定范围内

//初始化x，y

var x = -1;var y = -1;

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

functiondrawHeatMap() {

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秒热点加亮

functionlighten() {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函数：

functionreset() {

points={};

context.clearRect(0, 0, 300, 300);

x= -1;

y= -1;

}

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

getColor函数：

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

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

functiondrawPoint(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。

functionaddToPoint(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

2

3

4

5 #heatmap{

6 background-image:url("mapbg.jpg");

7 }

8

9

10

11 Reset

12

13

14 varpoints={};15 varSCALE= 3;16 varx= -1;17 vary= -1;18

19 functiondrawHeatMap() {20 document.getElementById("resetButton").οnclick=reset;21

22 canvas=document.getElementById("heatmap");23 context=canvas.getContext("2d");24 context.globalAlpha= 0.2;25 context.globalCompositeOperation= "lighter";26

27 functionlighten() {28 if(x!= -1) {29 addToPoint(x, y);30 }31 setTimeout(lighten,100);32 }33

34 canvas.οnmοusemοve= 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.οnmοuseοut= function(e) {42 x= -1;43 y= -1;44 }45

46 lighten();47 }48

49 functionreset() {50 points={};51 context.clearRect(0,0,300,300);52 x= -1;53 y= -1;54 }55

56 functiongetColor(intensity) {57 varcolors=["#072933","#2E4045","#8C593B","#B2814E","#FAC268","#FAD237"];58 returncolors[Math.floor(intensity/2)];

59 }60

61 functiondrawPoint(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 functionaddToPoint(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

92

View Code

原文：http://www.cnblogs.com/yanjliu/p/3906068.html