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

秒速五厘米 2022-08-13 14:59 122阅读 0赞

<!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").οnclick=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.οnmοusemοve=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>