如何使画布图形响应？

Question

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

---

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>

---

Answer 1

您可以在 canvas 元素上使用 css：

 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); }

 #linegraph1 { border: 1px solid grey; border-radius: 10px; /* Fit window */ width: 100%; }

 <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>

编辑

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