您的位置：首页 > Web前端 > HTML

HTML的一个Canvas实例 - 热度追踪

2014-11-04 10:37 429 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html5</title>
<style type="text/css">
#heatmap{
background-image:url("bark.jpg");
}
</style>
<script>
var points={};
var scale=3;
var x=-1;
var y=-1;

function loadDemo(){
document.getElementById("resetButton").onclick=reset;

canvas=document.getElementById("heatmap");
context=canvas.getContext("2d");
//为canvas设置一个高透明值，
context.globalAlpha=0.2;
//让新的绘制操作点亮底层的像素而不是替换它们.
context.globalCompositeOperation="lighter";
//在鼠标移动的时候或每隔1/10s的时间调用它以改变显示效果.
function sample(){
if( x!=-1 ){
addToPoint(x,y);
}
setTimeout(sample,100);
}
//鼠标移动时，改变这个像素点的显示效果
canvas.onmousemove=function( e){
x=e.clientX-e.target.offsetLeft;
y=e.clientY-e.target.offsetTop;
addToPoint(x,y);
}
sample();
}

function reset(){
points={};
context.clearRect(0,0,300,300);      //重置canvas空间.
x=-1;
y=-1;
}
//获取热点的颜色，由低到高的范围，不同的颜色值会被用来代表不同的热度，intensity值越大，则颜色越亮。
function getColor( intensity){
var colors=["#072933","#2e4045","#8c593b","#b2814e","#fac268","#fad237"];
return colors[Math.floor(intensity/2)];
}
//不管什么时候，只要鼠标移过或者悬停在canvas的某个区域，就会有一个点被绘制出来。
//鼠标在特写区域停留时间越长，这个点越大越亮。
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();
}
//鼠标移动或悬停时都会调用这个函数，canvas特定点上的热度值会升高并保存下来。 最高热度值为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]] );
}
//注册窗口加载完毕时的初始化操作
window.addEventListener("load",loadDemo, true);

</script>
</head>

<body>
<h1>本案例演示了一个热点图的创建</h1>
<canvas id="heatmap" class="clear" style="border:1px solid;" width="300" height="300">
</canvas>
<button id="resetButton">Reset</button>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航