如何在视口上调整画布宽度

Question

我有一个画布演示，它会产生一些圆圈。我似乎无法弄清楚如何让它在设置canvas.width 或canvas.style.width 时做出响应（这里有什么区别？） 在使用window.innerWidth 调整窗口大小时。

代码运行良好，但在较小的视口上会奇怪地重新呈现。我尝试在我的 javascript 文件底部添加这段 sn-p 代码，但它破坏了动画。

  // 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 拉伸或压缩 画布到您指定的宽度。这会将画布宽度设置为 300 像素：

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>