HTML5 canvas热点图应用

使用canvas API可以创建多种应用，下面我做一个我特别感兴趣的例子，叫做热点图。

怎么理解热点图呢，其实很简单，就是度量温度的意思，可以用于任何可测量的活动。界面上活跃高的部分以用亮色标记，活跃低的用暗色标记。举个例子，热点图可以用在城市地图标记交通路况，或者在世界各地地图上上显示风暴的活动情况。

接下来这个例子是，鼠标移动到某个区域，会使某个区域的热度增加。如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>heatmap</title>
       <style type="text/css">
           #heatmap{
               background-image:url(img/bac.jpg);
           }
       </style>
   </head>
   <body>
       <h1>heatMap</h1>
       <canvas id="heatmap" width="300" height="400"></canvas>
       <button id='button'>清空画面</button>
   </body>
   <script type="text/javascript">

           function log() {
                    console.log(arguments);
                }

                var points = {};
                var SCALE = 3;

                var x = -1;
                var y = -1;

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

                    canvas = document.getElementById("heatmap");
                    context = canvas.getContext('2d');
                    context.globalAlpha = 0.2;
                    context.globalCompositeOperation = "lighter";

                    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,400);
                    x = -1;
                    y = -1;
                }


                function getColor(intensity) {
                    var colors = ['#2F4F4F','#008000','#228B22','#32CD32','#00FF00','#7CFC00','#ADFF2F','#90EE90','yellow'];
                    return colors[Math.floor(intensity/2)];
                }

                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();
                }

                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>
</html>

HTML5 canvas热点图应用相关推荐

Aristochart – 灵活的 HTML5 Canvas 折线图
Aristochart 是基于 HTML5 Canvas 的折线图功能库,具有高定制性和灵活性的特点.Aristochart 会帮助你处理图形显示,让你能够专注于业务逻辑处理. 您可能感兴趣的相关文章 ...
基于Echarts的HTML5 Canvas折线图柱状图DEMO演示
HTML代码 : <div id="barChart" style="height: 400px;width:600px;background:white;marg ...
基于Echarts的HTML5 Canvas折线图DEMO演示
HTML代码: <div id="lineChart" style="height: 400px;width:600px;background:white;marg ...
html制作柱状图教程,基于Echarts的HTML5 Canvas折线图柱状图DEMO演示
JavaScript代码 : var barChart = { title: { text: '折柱混合图' }, dataZoom: { type:'inside',//slider //orien ...
html在线热点工具,Heatmap.js 强大的 HTML5 画布 WEB 网页在线热点图插件 - 资源分享...
Heatmap.js 可以用来生成基于用户自定义数据上的 Web 热点图,使用内嵌的 HTML5 Canvas 画布元素,heatmap.js 可以使用 Canvas 画出来一张漂亮的 heatmap ...
HTML5图片怎么添加渐变,HTML5 canvas图和实现填充渐变形状
本篇教程探讨了HTML5 canvas图和实现填充渐变形状,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < html PUBLIC "-//W3C/ ...
html5canvas绘制图片源码,HTML5 CANVAS：绘制图片
HTML5 CANVAS:绘制图片通过前面的学习,我们现在已经可以在HTML5 canvas中绘制图形和文字,并给它们设置一些样式.我们还可以在中绘制图片.用于在作为绘制源的图片可以是下面的几种元素 ...
html5 自动扣图,js+html5 canvas实现ps钢笔抠图
html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...
html5拓扑图图入门,如何使用HTML5 Canvas动态的绘制拓扑图
如何使用HTML5 Canvas动态的绘制拓扑图使用HTML5 Canvas动态的绘制拓扑图: HTML5中引入新的元素canvas,其drawImage 方法允许在 canvas 中插入其他图像( ...

HTML5 canvas热点图应用

HTML5 canvas热点图应用相关推荐

最新文章

热门文章