canvas制作天气折线图

<canvas id="myCanvas" width="440" height="60"></canvas>

    var sixdayHighTemperature = [5, 1, -12, -5, -10]; // 五天最高温度数组
    var sixdayLowTemperature = [-5, -10, -18, -18, -20]; // 五天最低温度数组
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var picHeight = 60;
    var maxHighTemp = maxNum(sixdayHighTemperature);
    var minLowTemp = minNum(sixdayLowTemperature);
    var maxRange = maxHighTemp - minLowTemp;
    function maxNum(arr) {
      var maxNum = 0;
      if (arr.length) {
        for (var i = 0, len = arr.length; i < len; i++) {
          if (i == 0) {
            maxNum = arr[0];
          } else if (maxNum < arr[i]) {
            maxNum = arr[i];
          }
        }
      }
      return maxNum;
    }
    function minNum(arr) {
      var minNum = 0;
      if (arr.length) {
        for (var i = 0, len = arr.length; i < len; i++) {
          if (i == 0) {
            minNum = arr[0];
          } else if (minNum > arr[i]) {
            minNum = arr[i];
          }
        }
      }
      return minNum;
    }
    ctx.lineWidth = 2;
    (function drawHighTemp(temps) {
      ctx.beginPath();
      ctx.strokeStyle = "#FF6666";
      var drawX = 0,
        drawY = 0;
      var distance = Math.floor(picHeight / maxRange);
      for (var i = 0, len = temps.length; i < len; i++) {
        drawX = i * 85 + 42;
        drawY = (maxHighTemp - temps[i]) * distance + 4;
        if (i == 0) {
          ctx.moveTo(drawX, drawY);
        } else {
          ctx.lineTo(drawX, drawY);
        }
      }
      ctx.stroke();
      ctx.closePath();

      ctx.beginPath();
      ctx.fillStyle = "#fff";
      var drawX = 0,
        drawY = 0;
      var distance = Math.floor(picHeight / maxRange);
      for (var i = 0, len = temps.length; i < len; i++) {
        drawX = i * 85 + 42;
        drawY = (maxHighTemp - temps[i]) * distance + 4;
        ctx.arc(drawX, drawY, 3, 0, 2 * Math.PI, false);
        ctx.fill();
        ctx.closePath();
      }
    })(sixdayHighTemperature);

    (function drawHighTemp(temps) {
      ctx.strokeStyle = "#50ABFF";
      ctx.beginPath();
      var drawX = 0,
        drawY = 0;
      var distance = Math.floor(picHeight / maxRange);
      for (var i = 0, len = temps.length; i < len; i++) {
        drawX = i * 85 + 42;
        drawY = picHeight - (temps[i] - minLowTemp) * distance - 4;
        if (i == 0) {
          ctx.moveTo(drawX, drawY);
        } else {
          ctx.lineTo(drawX, drawY);
        }
      }
      ctx.stroke();
      ctx.closePath();

      ctx.beginPath();
      ctx.fillStyle = "#fff";
      var drawX = 0,
        drawY = 0;
      var distance = Math.floor(picHeight / maxRange);
      for (var i = 0, len = temps.length; i < len; i++) {
        drawX = i * 85 + 42;
        drawY = picHeight - (temps[i] - minLowTemp) * distance - 4;
        ctx.arc(drawX, drawY, 3, 0, 2 * Math.PI, false);
        ctx.fill();
        ctx.closePath();
      }
    })(sixdayLowTemperature);

标签：canvas,ctx,arr,drawY,drawX,var,len,折线图,制作
来源： https://www.cnblogs.com/xcli/p/16461795.html