如何使畫布圖形響應？

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>

編輯

放大繪制的畫布以避免拉伸時出現不良像素化。