HTML5之10 __使用 Canvas API创建热点图

使用Canvas API 可以创建许多应用：图形、图表、图片编辑, 其中最奇妙的一个应用是修改或覆盖已有内容。最流行的覆盖图被称为热点图。热点图可以用在城市地图上来标记交通路况，或者显示风暴的活动情况。

在地图上只需要将canvas 叠放在地图上显示即可。实际上就是用 canvas 覆盖地图，然后再基于相应的活动数据绘制出不同的热度级别。

以下提供一个示例.

<!DOCTYPE html>
<html><title>HTML5 Canvas Example</title><style type="text/css">@import url("styles.css");#heatmap {background-image: url("mapbg.jpg");}</style><h1>HTML5 Canvas Example</h1><h2>Heatmap </h2><canvas id="heatmap" class="clear" style="border: 1px solid ; " height="300" width="300"> </canvas><button id="resetButton">Reset</button><script>function log() {console.log(arguments);}var points = {};var SCALE = 3;var x = -1;var y = -1;function loadDemo() {document.getElementById("resetButton").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,300);x = -1;y = -1;}function getColor(intensity) {var colors = ["#072933", "#2E4045", "#8C593B", "#B2814E", "#FAC268", "#FAD237"];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之10 __使用 Canvas API创建热点图相关推荐

HTML5 学习手笔二：canvas API 绘制树形图案A
上篇通过对canvas 画对角线,了解了一些canvas画图基本原理.现在可以利用HTML5 canvas API创建一个场景:带有长跑跑道的树林. 本篇大纲用canvas API绘制树木的树冠为 ...
HTML5 创建热点图
通过HTML5 canvas画布创建简单的热点图,当鼠标划过时产生热点,停留时间越长,热点亮度越高. 下面是HTML部分: <!DOCTYPE html> <html>< ...
html5中图片热点,HTML5 创建热点图
通过HTML5 canvas画布创建简单的热点图,当鼠标划过时产生热点,停留时间越长,热点亮度越高. 下面是HTML部分: #heatmap{background-image:url("ma ...
在Web应用程序中使用Canvas API
更多HTML 5文章请查阅HTML 6在线网站http://www.html5online.com.cn 本文概述本文介绍如何在一个Web应用程序中利用HTML 5中的Canvas API创建.编辑 ...
应用html5画布Apicss制作,程序设计HTML5 Canvas API
复制代码代码如下: try { document.createElement("Canvas").getContext("2d"); document.get ...
html5 Canvas API
2.1 Canvas 概述 Canvas本质上是一个位图画布,其上绘制的图形是不可缩放的,不能像SVG图像那样可以被放大缩小.此外,用Canvas绘制出来的对象不属于页面DOM结构或者任何命名空间. ...
用html做个猜字游戏,HTML5 Canvas API制作简单的猜字游戏
这篇文章主要介绍了借助HTML5 Canvas API制作一个简单的猜字游戏的实例分享,游戏中每局会自动生成一个字母,玩家按键盘来猜测该字母是哪一个,需要的朋友可以参考下二话不说,先上效果图以及源代 ...
java canvas 缩放图片_详解如何用HTML5 Canvas API控制图片的缩放变换
摘要:这篇HTML5栏目下的"详解如何用HTML5 Canvas API控制图片的缩放变换",介绍的技术点是"html5_canvas.canvas.Html5.控制图片 ...
HTML5(五)——Canvas API
什么是 Canvas API? Canvas API(画布)提供了一个通过 javascript 和 html 的 canvas 元素来在网页上实时绘制图形的方式.可用于动画.游戏.图标.图片编辑等多 ...

HTML5之10 __使用 Canvas API创建热点图

HTML5之10 __使用 Canvas API创建热点图相关推荐

最新文章

热门文章

HTML5之10 __使用 Canvas API创建 热点图

HTML5之10 __使用 Canvas API创建 热点图相关推荐

最新文章

热门文章

HTML5之10 __使用 Canvas API创建热点图

HTML5之10 __使用 Canvas API创建热点图相关推荐