javascript - 如何为 javascript 弹跳球创建可调整大小的 html5 Canvas ？

Question

我正在尝试在 html5 Canvas 中使用 javascript 创建一个旋转的弹跳球。我希望 Canvas 适合浏览器窗口的宽度和高度，同时可以调整大小

通过研究解决方案，我找到了两个独立的 javascript 代码部分，但我对 javascript 不够熟悉，无法以某种方式合并它们以实现此目的

<canvas id="myCanvas">
    <h1>Bouncing Ball</h1>
</canvas>

<script>
  window.onload = function() {

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var x = canvas.width / 2;
    var y = canvas.height / 2;
    // SPEED
    var dx = 2;
    var dy = -2;

    draw();

    function draw() {

      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.beginPath();

      ctx.arc(x, y, 100, 0, Math.PI * 2);
      ctx.fillStyle = "#9370DB";
      ctx.fill();
      ctx.closePath();

      if (x + dx > 480) {
        dx = -dx;
      }

      if (x + dx < 0) {
        dx = -dx;
      }

      if (y + dy > 680) {
        dy = -dy;
      }

      if (y + dy < 0) {
        dy = -dy;
      }

      x += dx;
      y += dy;
    }

    setInterval(draw, 10);
  }
</script>

<script>
  (function() {
    var canvas = document.getElementById("myCanvas"),
      context = canvas.getContext("2d");

    // resize the canvas to fill browser window dynamically
    window.addEventListener('resize', resizeCanvas, false);

    function resizeCanvas() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      drawStuff();
    }
    resizeCanvas();

    function drawStuff() {
      // do your drawing stuff here
    }
  })();
</script>

Answer 1

在 draw() 函数中，您要检查球的位置是否超出 Canvas 的边界。

if (x + dx > 480) {

和

if (y + dy > 680) {

由于即使窗口的尺寸发生变化，您也希望球保持在边界内，因此我们需要获取 Canvas 的实际尺寸。就在开始时，您定义了一个变量，该变量包含对 Canvas 的引用。

var canvas = document.getElementById("myCanvas");

使用它，我们可以通过调用 canvas.width 和 canvas.height 获得实际尺寸。

所以上面的两个if语句变成:

if (x + dx > canvas.width) {
if (y + dy > canvas.height) {

现在如果用户调整窗口大小，将调用以下函数:

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

如您所见，我们正在使用窗口大小更新 Canvas 的宽度和高度属性。

剩下的只是将您的两个片段合并为一个 - 这没什么大不了的。这是一个工作示例:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
// SPEED
var dx = 2;
var dy = -2;

var radius = 100;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();

  ctx.arc(x, y, radius, 0, Math.PI * 2);
  ctx.fillStyle = "#9370DB";
  ctx.fill();
  ctx.closePath();

  if (x + dx > canvas.width - radius) {
    dx = -dx;
  }

  if (x + dx < radius) {
    dx = -dx;
  }

  if (y + dy > canvas.height - radius) {
    dy = -dy;
  }

  if (y + dy < radius) {
    dy = -dy;
  }

  x += dx;
  y += dy;
}

// resize the canvas to fill browser window dynamically
window.addEventListener('resize', resizeCanvas, false);

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

resizeCanvas();

x = canvas.width / 2;
y = canvas.height / 2;

setInterval(draw, 10);

<canvas id="myCanvas">
    <h1>Bouncing Ball</h1>
</canvas>