Canvas 热点图

最新推荐文章于 2021-11-29 17:48:28 发布

zhangying--

最新推荐文章于 2021-11-29 17:48:28 发布

阅读量869

点赞数

分类专栏： html5 文章标签：图 canvas

本文链接：https://blog.youkuaiyun.com/u012337009/article/details/45271305

版权

html5 专栏收录该内容

3 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>HeatMap</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<style type="text/css">
#canvas{
background-image:url('temp.jpg');
}


</style>
<body>
    <canvas id='canvas' width='300' height='300'>
    your browser can't support canvas.
    </canvas>
    <button id='reset' value='reset'> reset</button>
    <script>
    window.onload=function(){
      var timer=null;
    var points={};
    var x=-1;
    var y=-1;
    var scale=3;//缩放比例
    var canvas=document.getElementById('canvas');
    var reset=document.getElementById('reset');
    var cxt=canvas.getContext('2d');
    cxt.globalAlpha=0.2;
    cxt.globalCompositeOperation='lighter';
      var timer=null;
    var sample=function(){
    if(x>0 && x<300){
    addPoint(x,y);
    }
    timer=setTimeout(sample,100);//用来循环   

    }


    var addPoint=function(x,y){
    //计算热度值
    if(!points[[x,y]]){
    points[[x,y]]=1;
    }else{
    if(points[[x,y]]<10){
    points[[x,y]]+=1;
    }
    }
    drawPoint(x,y,points[[x,y]]);
    }
    //画圆 热度值越大，半径越大，颜色越深
    var drawPoint=function(x,y,scale){
    var colors=['#e072933','#2e4045','#8c593b','#b2814e','#fac268','#fad237'];
    var num=Math.floor(scale/2);
    cxt.beginPath();
    cxt.arc(x,y,scale*3,0,360,false);
    cxt.closePath();
        cxt.fillStyle=colors[num];
        cxt.fill();console.log(scale);
    }
        canvas.onmousemove=function(event){
        if(timer==null){
         timer=setTimeout(sample,10); 
        }
    var event=window.event||ev;
    x=event.clientX-this.offsetLeft;
    y=event.clientY-this.offsetTop;
    addPoint(x,y);
    }
      canvas.onmouseout=function(){
        clearTimeout(timer);
        timer=null;
      }
      reset.onclick=function(){
        points={};
        x=-1;y=-1;
        cxt.clearRect(0,0,300,300);
      }
      sample();


    }
    </script>
</body>
</html>