首頁 > web前端 > H5教程 > HTML5之10 __使用 Canvas API建立 熱點圖

HTML5之10 __使用 Canvas API建立 熱點圖

黄舟
發布: 2017-02-18 14:47:03
原創
2026 人瀏覽過

使用Canvas API 可以創造許多應用:  圖形、圖表、圖片編輯,  其中最奇妙的一個應用是修改或覆蓋已有內容。 最流行的覆蓋圖稱為熱點圖。 熱點圖可以用在城市地圖上來標示交通路況, 或顯示風暴的活動狀況。

在地圖上只需要將canvas 疊放在地圖上顯示即可。 其實就是用  canvas 覆蓋地圖, 然後再基於對應的活動資料繪製出不同的熱度等級。

以下提供一個例子.

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

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

<!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(&#39;2d&#39;);

        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>

登入後複製




__5057% 的內容,更多相關內容請關注PHP中文網(www.php.cn)!


本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板