如何在視口上調整畫布寬度

Question

我有一個畫布演示，可以生成一些圓圈。 我似乎無法弄清楚如何讓它在使用window.innerWidth調整大小的窗口上設置canvas.width或canvas.style.width （這里有什么區別？）時具有window.innerWidth 。

代碼工作正常，但它在較小的視口上重新渲染很奇怪。 我嘗試在我的 javascript 文件底部添加這段代碼，但它破壞了動畫。

  // ADDING THESE LINES PREVENTS ANIMATION FROM RUNNING
  if (window.innerWidth < 1000) {
    canvas.width = window.innerWidth;
   } else {
     canvas.width = 1000;
   }

 var canvas = document.querySelector("canvas"); canvas.width = 1000; canvas.height = 100; var c = canvas.getContext("2d"); // Constructor Function (object blueprint) function Circle(x, y, dx, dy, radius, counter) { this.x = x; this.y = y; this.dx = dx; this.dy = dy; this.radius = radius; this.counter = counter; this.draw = function() { c.beginPath(); c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); c.strokeStyle = "white"; c.stroke(); c.fillStyle = "white"; c.fill(); }; this.update = function() { if (this.y + this.radius > canvas.height) { this.y = 0; } this.x += this.dx; this.y += this.dy; this.draw(); }; } // Initialize array to store snow objects var circleArray = []; // Initialize objects with constructor for (var i = 0; i < 50; i++) { var radius = 1 + Math.random() * 5; var x = Math.random() * canvas.width; var y = 0 - Math.random() * 50; // start at top, render some circles off screen var dx = (Math.random() - 0.5) * 2; var dy = 0.5 + Math.random() * 0.5; // use gravity circleArray.push(new Circle(x, y, dx, dy, radius, 0)); } function animate() { requestAnimationFrame(animate); // recurisvely run c.clearRect(0, 0, innerWidth, innerHeight); // erases previously drawn content for (var i = 0; i < circleArray.length; i++) { circleArray[i].update(); } // ADDING THESE LINES PREVENTS ANIMATION FROM RUNNING //if (window.innerWidth < 1000) { // canvas.width = window.innerWidth; // } else { // canvas.width = 1000; // } } animate();

 body { background-color: grey; display: flex; justify-content: center; } .wrapper { position: relative; width: 1000px; height: 110px; min-height: 110px; margin-top: 50vh; } .wrapper > * { width: 1000px; position: absolute; } canvas { position: absolute; } img { width: 100%; height: 110px; }

 <div class="wrapper"> <img class="stars" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/867725/stars.png " alt="" /> <img class="tress" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/867725/trees.png " alt="" /> <img class="clouds" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/867725/clouds.png" alt="" /> <canvas></canvas> </div>

Answer 1

canvas.width和canvas.style.width的區別在於canvas.width canvas.style.width為canvas.width指定畫布的實際大小，而canvas.style.width將畫布拉伸或壓縮到您指定的寬度。 這會將畫布寬度設置為 300px：

canvas.width = 300;

這也會將畫布寬度設置為 300 像素，但會拉伸它直到達到 600 像素：

canvas.width = 300;
canvas.style.width = "600px";

使用canvas.width是更好的做法。

---

要運行動畫，您必須首先固定畫布寬度。 將調整畫布大小的代碼放在animate()函數的開頭即可解決問題：

 var canvas = document.querySelector("canvas"); canvas.width = 1000; canvas.height = 100; var c = canvas.getContext("2d"); // Constructor Function (object blueprint) function Circle(x, y, dx, dy, radius, counter) { this.x = x; this.y = y; this.dx = dx; this.dy = dy; this.radius = radius; this.counter = counter; this.draw = function() { c.beginPath(); c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); c.strokeStyle = "white"; c.stroke(); c.fillStyle = "white"; c.fill(); }; this.update = function() { if (this.y + this.radius > canvas.height) { this.y = 0; } this.x += this.dx; this.y += this.dy; this.draw(); }; } // Initialize array to store snow objects var circleArray = []; // Initialize objects with constructor for (var i = 0; i < 50; i++) { var radius = 1 + Math.random() * 5; var x = Math.random() * canvas.width; var y = 0 - Math.random() * 50; // start at top, render some circles off screen var dx = (Math.random() - 0.5) * 2; var dy = 0.5 + Math.random() * 0.5; // use gravity circleArray.push(new Circle(x, y, dx, dy, radius, 0)); } function animate() { if (window.innerWidth < 1000) { canvas.width = window.innerWidth; } else { canvas.width = 1000; } requestAnimationFrame(animate); // recurisvely run c.clearRect(0, 0, innerWidth, innerHeight); // erases previously drawn content for (var i = 0; i < circleArray.length; i++) { circleArray[i].update(); } } animate();

 body { background-color: grey; display: flex; justify-content: center; } .wrapper { position: relative; width: 1000px; height: 110px; min-height: 110px; margin-top: 50vh; } .wrapper>* { width: 1000px; position: absolute; } canvas { position: absolute; } img { width: 100%; height: 110px; }

 <div class="wrapper"> <img class="stars" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/867725/stars.png " alt="" /> <img class="tress" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/867725/trees.png " alt="" /> <img class="clouds" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/867725/clouds.png" alt="" /> <canvas></canvas> </div>