百度UEO基于canvas绘制热力图的演示

百度UEO基于canvas绘制热力图的演示
作者：Neoxone 发表时间： 2010年09月10号，星期五阅读：9,689 次

上周，因友介绍读了百度UEO的这篇文章,基于Canvas的热力图绘制方法
canvas对HTML5自身来说，大大扩张了一块版图，对flash来说，也使html5拥有了十足的竞争力。对于未来的RIA开发，canvas很有机会成为首选基石。（据闻已有基于canvas的游戏引擎）

以下核心代码拷贝自baidu UEO原文。做了一点改动，和模拟数据的code，以便可以演示（百度UEO原文不能演示）。
话说人家code为了项目，我code纯为了demo，哈哈。

<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>canvas热力图演示</title>
<style>
*{padding:0;margin:0;}
.wrap{width:1000px;height:500px;margin:0 auto;border:2px solid #eee;}
#pad{position:absolute;z-index:-1;top:0;left:50%;background:#eee;opacity:.8;}
#switch{position:absolute;z-index:20;}
</style>
</head>
<body onmousedown=imit(event)>
<div class="wrap" >
	<img src="https://www.google.com.hk/intl/zh-CN/images/logo_cn.png" />
	<img src="https://www.google.com.hk/intl/zh-CN/images/logo_cn.png" />
	<img src="https://www.google.com.hk/intl/zh-CN/images/logo_cn.png" />
</div>
<input id="switch"type='button' value="切换热力图显示在上层" />
<script>
var canvas= document.createElement('canvas');
var context = canvas.getContext('2d');
	canvas.id = "pad";
	canvas.width = document.documentElement.scrollWidth;
	canvas.height = Math.max(document.documentElement.clientHeight,document.body.offsetHeight);
	canvas.style.marginLeft = - canvas.width/2+'px';
	document.body.appendChild(canvas);
var points =[];
var oData = [];
var imit=function(e){
	points.push([e.clientX - canvas.offsetLeft, e.clientY]);  //手动模拟点,再按二次函数自动生成100个点。
	for(var i=0; i<100 ;i++){
		var r1=Math.random()*2,r2=Math.random()*2;
		points.push([parseInt(Math.pow(r1,2)*500)+5,parseInt(Math.pow(r2,2)*150)+5])
	}
	analy();
	draw();
}
function analy(){
	var cache = {};
	//计算每个点的密度
	for (var i = 0, len = points.length; i < len; i++) {
		var key = points[i][0] + '*' + points[i][1];
		 if (cache[key]) {
			cache[key] ++;
		} else {
			cache[key] = 1;
		}
	}
	//点数据还原
	oData.length=0;
	for (var m in cache) {
		if (m == '0*0') continue;
		var x = parseInt(m.split('*')[0], 10);
		var y = parseInt(m.split('*')[1], 0);
		oData.push([x, y, cache[m]]);
	}
	//简单排序，使用数组内建的sort
	oData.sort(function(a, b){
		return a[2] - b[2];
	});
}
function draw(){
	context.clearRect(0,0,canvas.width,canvas.height); //每次点击都要重绘，每次重绘都需清屏
	var max = oData[oData.length - 1][2];
		max=(max==1) ? 2 : max   //如果最大密度等于1，则认为2，避免log(max)为0
	var pi2 = Math.PI * 2;
	//alpha增强参数
	var pr = (Math.log(245)-1)/245;
	for (var i = 0, len = oData.length; i < len; i++) {
		//q参数用于平衡梯度差，使之符合人的感知曲线log2N，如需要精确梯度，去掉log计算
		var q = parseInt(Math.log(oData[i][2]) / Math.log(max) * 255);
		var r = parseInt(128 * Math.sin((1 / 256 * q - 0.5 ) * Math.PI ) + 200);
		var g = parseInt(128 * Math.sin((1 / 128 * q - 0.5 ) * Math.PI ) + 127);
		var b = parseInt(256 * Math.sin((1 / 256 * q + 0.5 ) * Math.PI ));
		var alp = (0.92 * q + 20) / 255;
		//灰度增强，
		//var alp = (Math.exp(pr * q + 1) + 10) / 255
		var radgrad = context.createRadialGradient(oData[i][0], oData[i][1], 1, oData[i][0], oData[i][1], 8);
		radgrad.addColorStop( 0, 'rgba(' + r + ',' + g + ','+ b + ',' + alp + ')');
		radgrad.addColorStop( 1, 'rgba(' + r + ',' + g + ','+ b + ',0)');
		context.fillStyle = radgrad;
		context.fillRect( oData[i][0] - 8, oData[i][1] - 8, 16, 16);
	}
}
var switcher = document.getElementById("switch");
	switcher.onclick = function(){
		canvas.style.zIndex = (canvas.style.zIndex == -1) ?  10 : -1; //注意一点，style.xx只能取得行内样式的，要获取外部样式可以使用getComputedStyle和currentStyle.
		//canvas.style.display = (canvas.style.display == 'block') ?  'none' : 'block';
	}
</script>
</body>
</html>

运行后，别忘了点击屏幕。

标签： canvas, HTML5, 热力图

这篇文章发布于 2010年09月10号，星期五，14:57，归类于 HTML5。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。您可以留下评论，或者从您的站点trackback。

经典如来说：

2010年09月14日于16:17

看不懂，玩不来，哦。MY mother.

2010年09月14日于16:25

在中心那一圈点击，中间没红，边上倒是紫色发红。

ONEBOYS 回复:
九月 15th, 2010 at 08:46

@经典如来, 为了效果，除了自己点击的点，我还生成了100个点。
如果你想看自己的真实点击。可以把100改成0

经典如来回复:
九月 16th, 2010 at 17:38

@ONEBOYS,
不好意思，昨天没看代码，把FOR去掉，知道是啥了。。。不过代码依然看不大懂。

ONEBOYS 回复:
九月 17th, 2010 at 09:39

@经典如来, 可能需要先看下这些：http://www.cssass.com/blog/index.php/2010/772.html

CSSASSCSSASS

百度UEO基于canvas绘制热力图的演示
作者：Neoxone 发表时间： 2010年09月10号，星期五阅读：9,689 次

相关文章:

5 条评论发表在“百度UEO基于canvas绘制热力图的演示”上

留下回复

百度UEO基于canvas绘制热力图的演示作者：Neoxone 发表时间： 2010年09月10号，星期五 阅读：9,689 次

相关文章:

5 条评论 发表在“百度UEO基于canvas绘制热力图的演示”上

留下回复

百度UEO基于canvas绘制热力图的演示
作者：Neoxone 发表时间： 2010年09月10号，星期五阅读：9,689 次

5 条评论发表在“百度UEO基于canvas绘制热力图的演示”上