HTML5 canvas hotspot map application and html5canvas hotspot Map

Source: Internet
Author: User
Tags getcolor

HTML5 canvas hotspot map application and html5canvas hotspot Map

You can use the canvas API to create multiple applications. The following is an example that I am particularly interested in:Hotspot Diagram.

How can we understand a hotspot chart? It is actually very simple, that is, to measure the temperature, which can be used for any measurable activity. The active and high parts of the interface are marked with bright colors, and the active and low parts are marked with dark colors. For example, a hotspot map can be used to mark traffic conditions on a city map or to display storms on maps around the world.

In the following example, moving the mouse over a certain area will increase the heat of a certain area. As follows:

<! DOCTYPE html>
<Meta charset = "UTF-8">
<Title> heatmap </title>
<Style type = "text/css">
# Heatmap {
Background-image: url (img/bac.jpg );
<H1> heatMap <Canvas id = "heatmap" width = "300" height = "400"> </canvas>
<Button id = 'button '> clear screen </button>
<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.tar get. offsetLeft;
Y = e. clientY-e.tar get. 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 ){
} Else {
Points [[x, y] ++;
DrawPoint (x * SCALE, y * SCALE, points [[x, y]);

Window. addEventListener ("load", loadDemo, true );


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.