Home > Developer > Web Develop
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>
<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 <Canvas id = "heatmap" width = "300" height = "400"> </canvas>
<Button id = 'button '> clear screen </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.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 ){
Return
} Else {
Points [[x, y] ++;
}
DrawPoint (x * SCALE, y * SCALE, points [[x, y]);
}
Window. addEventListener ("load", loadDemo, true );
</Script>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
