heatmap实现不了？

computer_greenhand 2017-07-22 11:12:17

[code=html<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<style>
#heatmap{
background-image:url("./img/Koala.jpg");
}
</style>
</head>

<body>
<h2>Heatmap</h2>
<canvas id = "heatmap" class = "clear" width = "300" height = "300" style = "border: 1px solid;"></canvas>
<button id = "resetButton">Reset</button>
<script>
var point = {};
var SCALE = 3;
var x = -1;
var y = -1;
function reset(){
points = {};
context.clearRect(0,0,300,300);
x = -1;
y = -1;
}
function getColor(){
colors = ['#072933','#2E4045','#8C5938','#B2814E','#FAC268','#FAD237'];
return colors[Math.floor(intensity/2)];
}
function drawPoint(){
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();
}
function addToPoint(){
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]]);
}

function loadDemo(){
document.getElementById('resetButton').onclick = reset;
canvas = document.getElementById('heatmap');
context = canvas.getContext('2d');
context.globalAlpha = 0.2;
context.globalCompositeOperation = 'lighter';

canvas.onmousemove = function(e){
x = e.clientX - e.target.offsetLeft;
y = e.clientY - e.target.offsetTop;
addToPoint(x,y);
function sample(){
if(x != -1){addToPoint(x,y);}
setTimeOut(sample,100);
}
}
sample();
}
window.addEventListener('load',loadDemo,true);
</script>
</body>

</html>][/code]