canvas绘制的图像，在窗口大小改变的时候跟着改变

最新推荐文章于 2024-07-08 16:22:29 发布

bluejad

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量558

点赞数 10

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/bluejad/article/details/135273260

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/heatmap.js/2.0.0/heatmap.min.js"></script>
    <style>
      #content {
        width: 40%;
      }
      .heatmap-canvas {
        display: block;
        width: 100%;
        height: 100%; /* 设置 canvas 高度为父盒子高度 */
      }
      #heatmap {
        /* width: 400px;
        height: 600px; */
        width: 100%;
        height: 100%; /* 设置 canvas 高度为父盒子高度 */
        /* border: 1px solid; */
        border-color: grey;
        background-size: contain; /* 背景图将会完全显示在区域内，保持宽高比例 */
        background-repeat: no-repeat; /* 禁止背景图重复 */
        background-position: center; /* 将背景图居中显示 */
        /* margin: auto; 水平居中 */
        background-image: url("../../../assets/images/罐子.png");
      }
      .tooltip {
        background: rgba(0, 0, 0, 0.8);
        padding: 5px;
        line-height: 18px;
        color: white;
        width: fit-content;
        position: absolute;
        display: none;
      }
      .legend-area {
        position: absolute;
        top: 55px;
        /* bottom: 10px; */
        right: -250px;
        padding: 10px;
        background: white;
        outline: 2px solid rgb(0, 0, 0);
        line-height: 1em;
      }
      #min {
        float: left;
      }
      #max {
        float: right;
      }
      span {
        margin: 0;
        padding: 0;
      }
      h4 {
        margin: 0;
        padding: 0;
        margin-bottom: 5px;
      }
      .legend-area2 {
        position: absolute;
        top: 150px;
        /* bottom: 10px; */
        right: -125px;
        padding: 10px;
        background: white;
        outline: 2px solid rgb(0, 0, 0);
        line-height: 1em;
        display: none;
      }
    </style>
  </head>
  <body>
    <div id='content' style="height: 30vh;"> <!-- 设置父盒子的初始高度 -->

    <div
      id="heatmap"
      ref="heatmapContainer"
      class="demo-wrapper"
      :style="{'backgroundImage':`url(${isUCF==true? backgroundImage:backgroundImage2})`}"
    >
      <div class="tooltip"></div>

      <div class="legend-area">
        <h4>图例</h4>
        <span id="min">-40℃</span>
        <span id="max">40℃</span>
        <!-- <img id="gradient" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAKCAYAAABCHPt+AAAAAXNSR0IArs4c6QAAAO1JREFUWEftl1ELgzAMhE9MwP7//+n2tApTHHGLqChtpUZhChJCpT4c311SAH2Pox96A1UDuAaoPOD8wf33P8QtKgAOMK3sATz2vYWJINz+hFBBbCrTOYJQA6AG8EyvNoIIISMdOcUQ6oQ2oU7unfdEbZAOJSgnRXQTsi7yaYRcXpCBEM0Nu0rUBQnJSYbSNhByacv6twy5PCEsU5b6vF1l6kynK6WNXpETlob+ZCKzCXUhZMuyVCg9D/XLe5bfT865TA/1Zcjv6WehrtYVOQYbCXITEruX2AkSJGRjaRwJSF8qzyBEbKuMtawVaj499OBUDrGT6AAAAABJRU5ErkJggg==" style="width:100%"> -->
        <img id="gradient" style="width: 100%" />
      </div>
      <div class="legend-area2" id="legend-area2">
        <h4>时间</h4>
        <span>{{ ctime }}</span>
      </div>
    </div>
    </div>
    <script type="text/javascript">
      /*  start legend code */
      // we want to display the gradient, so we have to draw it
      var legendCanvas = document.createElement("canvas");
      legendCanvas.width = 100;
      legendCanvas.height = 10;
      var min = document.querySelector("#min");
      var max = document.querySelector("#max");
      var gradientImg = document.querySelector("#gradient");
      var legendCtx = legendCanvas.getContext("2d");
      var gradientCfg = {};
      function updateLegend(data) {
        // the onExtremaChange callback gives us min, max, and the gradientConfig
        // so we can update the legend
        // console.log(data);
        var min = document.querySelector("#min");
        var max = document.querySelector("#max");
        min.innerHTML = data.min;
        max.innerHTML = data.max;
        // regenerate gradient image
        if (data.gradient != gradientCfg) {
          gradientCfg = data.gradient;
          var gradient = legendCtx.createLinearGradient(0, 0, 100, 1);
          for (var key in gradientCfg) {
            gradient.addColorStop(key, gradientCfg[key]);
          }
          legendCtx.fillStyle = gradient;
          legendCtx.fillRect(0, 0, 100, 10);
          gradientImg.src = legendCanvas.toDataURL();
        }
      }
      /* legend code end */
      var heatmapInstance = h337.create({
        container: document.querySelector("#heatmap"),
        // onExtremaChange will be called whenever there's a new maximum or minimum
        onExtremaChange: function (data) {
          updateLegend(data);
        },
        gradient: {
          '0': '#0000FF',
          '0.2': '#00FFFF',
          '0.4': '#00FF00',
          '0.6': '#FFFF00',
          '0.8': '#FFA500',
          '1': '#FF0000'
        },
        backgroundColor: 'rgba(100,50,100,0.5)',

      });
      /* tooltip code start */
      var demoWrapper = document.querySelector(".demo-wrapper");
      var tooltip = document.querySelector(".tooltip");
      function updateTooltip(x, y, value) {
        // + 15 for distance to cursor
        var transl = "translate(" + (x + 15) + "px, " + (y + 15) + "px)";
        tooltip.style.webkitTransform = transl;
        tooltip.innerHTML = value;
      }
      demoWrapper.onmousemove = function (ev) {
        var x = ev.layerX;
        var y = ev.layerY;
        // getValueAt gives us the value for a point p(x/y)
        var value = heatmapInstance.getValueAt({
          x: x,
          y: y,
        });
        tooltip.style.display = "block";
        updateTooltip(x, y, value);
      };
      // hide tooltip on mouseout
      demoWrapper.onmouseout = function () {
        tooltip.style.display = "none";
      };
      /* tooltip code end */
      function generateRandomValue(min, max) {
        // 生成 min 到 max 之间的随机整数
        return Math.floor(Math.random() * (max - min + 1) + min);
      }
      // generate some random data
    //   var points = [];
    //   var max = 0;
    //   var min = 1234;
    //   var width = 240;
    //   var height = 100;
    //   var len = 3;

    //   while (len--) {
    //     var val = Math.floor(Math.random() * 1234);
    //     // var val = generateRandomValue(4,9);
    //     var val = 10
    //     max = Math.max(max, val);
    //     min = Math.min(min, val);
    //     max = 10
    //     min = -10
    //     var point = {
    //       x: Math.floor(Math.random() * width)+40,
    //       y: Math.floor(Math.random() * height)+40,
    //       value: val,
    //       radius:30,
    //       name:"UV"+len
    //     };
    //     points.push(point);
    //   }
    //   var data = { max: max, min: min, data: points };
    //   console.log(data);
    //   heatmapInstance.setData(data);

    setInterval(()=>{
        var grv=generateRandomValue(-20,-10)
        var points=[
            
            {
                "x": 262,
                "y": 101,
                "value": grv,
                "radius": 30,
                "name": "UV2"
            },
            {
                "x": 231,
                "y": 130,
                "value": generateRandomValue(4,9),
                "radius": 30,
                "name": "UV1"
            },
            {
                "x": 102,
                "y": 119,
                "value": generateRandomValue(4,9),
                "radius": 30,
                "name": "UV0"
            }
        ]
        var max = 40
        var min = -40
        var data = { max: max, min: min, data: points };
        console.log(grv);
        console.log(data);
        heatmapInstance.setData(data);
    },1000)
    </script>
  </body>
</html>

关键在这一句：

.heatmap-canvas {
display: block;
width: 100%;
height: 100%; /* 设置 canvas 高度为父盒子高度 */
}