javascript-temperatureMap/index.html at master · squido75/javascript-temperatureMap · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html>
    <head>
        <title></title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
        <script src='./temperatureMap.js'></script>
        <script>
        var height = 500;
        var width = 500;
        var run = function () {
            var can0 = document.getElementById("cns0"),
                ctx0 = can0.getContext("2d"),
                drw0 = new TemperatureMap(ctx0),
                can1 = document.getElementById("cns1"),
                ctx1 = can1.getContext("2d"),
                drw1 = new TemperatureMap(ctx1),
                can2 = document.getElementById("cns2"),
                ctx2 = can2.getContext("2d"),
                drw2 = new TemperatureMap(ctx2),
                can3 = document.getElementById("cns3");

            drw0.setRandomPoints(25, width, height);
            drw0.drawLow(5, 8, false, function () { drw0.drawPoints(); });

            drw1.setPoints(drw0.points, width, height);
            drw1.drawFull(false, function () { drw1.drawPoints(); });

            drw2.setPoints(drw0.points, width, height);
            drw2.drawFull(true, function () {  });
        }
        </script>
    </head>
    <body onload='run()'>
        <img src='./map.png' style='position: absolute; top:    0px; left:    0px; z-index: -10'/>
        <img src='./map.png' style='position: absolute; top:    0px; left:  500px; z-index: -10'/>
        <img src='./map.png' style='position: absolute; top:  500px; left:    0px; z-index: -10'/>
        <canvas id='cns0' width='500' height='500' style="position: absolute; top:    0px; left:    0px; height: 500px; width: 500px;"></canvas>
        <canvas id='cns1' width='500' height='500' style="position: absolute; top:    0px; left:  500px; height: 500px; width: 500px;"></canvas>
        <canvas id='cns2' width='500' height='500' style="position: absolute; top:  500px; left:    0px; height: 500px; width: 500px;"></canvas>
    </body>
</html>