如何使画布图响应?

时间:2017-01-06 07:38:17

标签: javascript html css canvas

我用画布制作了这张图。然而,这个图表没有响应,当我试图通过根据新尺寸绘图来使其响应时旧线条与新线条一起保留在屏幕上。如何在不重复绘制每一行的情况下调整每一行的大小?

  1. function drawShape(a, b, c, d, e, f, g, h, i, j, k, l) {
        var canvas = document.getElementById('linegraph1');
        var value = new Array(a, b, c, d, e, f, g, h, i, j, k, l);
        var ctx = canvas.getContext('2d');
        for (i = 1; i < 13; i++) {
            {
                ctx.beginPath();
                ctx.lineWidth = 9;
                ctx.lineCap = 'round';
                ctx.strokeStyle = '#FFFFFF';
                ctx.moveTo(7 + i * 30, 50);
                ctx.lineTo(7 + i * 30, 150);
                ctx.stroke();
            }
            {
                ctx.beginPath();
                ctx.lineWidth = 9;
                ctx.lineCap = 'round';
                ctx.strokeStyle = '#EFF2FB';
                ctx.moveTo(7 + i * 30, 50);
                ctx.lineTo(7 + i * 30, 150);
                ctx.stroke();
            }
            ctx.lineWidth = 9;
            ctx.beginPath();
            ctx.moveTo(7 + i * 30, 150);
            if (value[i - 1] > 100) {
                var buffer = 50;
            } else {
                var buffer = 150 - value[i - 1];
            }
            ctx.lineTo(7 + i * 30, buffer);
            if (value[i - 1] > 80) {
                ctx.strokeStyle = '#B60114';
            } else {
                ctx.strokeStyle = '#0093CF';
            }
            ctx.lineCap = 'round';
            ctx.lineCap = 'round';
            ctx.font = "15px Arial";
            ctx.fillText(value[i - 1], 1 + i * 30, 180);
            ctx.stroke();
        }
        ctx.beginPath();
        ctx.font = "15px Arial";
        ctx.fillText("0", 400, 150);
        ctx.fillText("25", 400, 105);
        ctx.fillText("50", 400, 60);
        ctx.fillText("mb", 400, 180);
    }
    <div>
        <canvas id="linegraph1" width="450" height="200" style="border:1px solid grey; border-radius: 10px;">
    </div>
    <button onclick="drawShape(10, 20, 80, 45, 55, 88, 74, 41, 45, 12, 21, 12)">Draw Graph</button>

1 个答案:

答案 0 :(得分:0)

你可以在canvas元素上使用css:

&#13;
&#13;
function drawShape(a, b, c, d, e, f, g, h, i, j, k, l) {
  var canvas = document.getElementById('linegraph1');
  var value = new Array(a, b, c, d, e, f, g, h, i, j, k, l);
  var ctx = canvas.getContext('2d');
  //Wipe canvas between draws
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (i = 1; i < 13; i++) {
    {
      ctx.beginPath();
      ctx.lineWidth = 90;
      ctx.lineCap = 'round';
      ctx.strokeStyle = '#FFFFFF';
      ctx.moveTo(7 + i * 300, 500);
      ctx.lineTo(7 + i * 300, 1500);
      ctx.stroke();
    } {
      ctx.beginPath();
      ctx.lineWidth = 90;
      ctx.lineCap = 'round';
      ctx.strokeStyle = '#EFF2FB';
      ctx.moveTo(7 + i * 300, 500);
      ctx.lineTo(7 + i * 300, 1500);
      ctx.stroke();
    }
    ctx.lineWidth = 90;
    ctx.beginPath();
    ctx.moveTo(7 + i * 300, 1500);
    if (value[i - 1] > 100) {
      var buffer = 50;
    } else {
      var buffer = 150 - value[i - 1];
    }
    ctx.lineTo(7 + i * 300, buffer);
    if (value[i - 1] > 80) {
      ctx.strokeStyle = '#B60114';
    } else {
      ctx.strokeStyle = '#0093CF';
    }
    ctx.lineCap = 'round';
    ctx.lineCap = 'round';
    ctx.font = "150px Arial";
    ctx.fillText(value[i - 1], 1 + i * 300, 1800);
    ctx.stroke();
  }
  ctx.beginPath();
  ctx.font = "150px Arial";
  ctx.fillText("0", 4000, 1500);
  ctx.fillText("25", 4000, 1050);
  ctx.fillText("50", 4000, 600);
  ctx.fillText("mb", 4000, 1800);
}
&#13;
#linegraph1 {
  border: 1px solid grey;
  border-radius: 10px;
  /* Fit window */
  width: 100%;
}
&#13;
<div>
  <canvas id="linegraph1" width="4500" height="2000"></canvas>
</div>
<button onclick="drawShape(10, 20, 80, 45, 55, 88, 74, 41, 45, 12, 21, 12)">Draw Graph</button>
&#13;
&#13;
&#13;

修改

放大绘制的画布以避免拉伸时出现不良像素化。