如何為JavaScript彈跳球創建可調整大小的HTML5畫布？

Question

我正在嘗試使用html5畫布內的javascript創建旋轉的彈跳球。 我希望畫布適合瀏覽器窗口的寬度和高度，同時可調整大小

通過研究解決方案，我進入了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（）函數內部，您要檢查球的位置是否超出畫布的邊界。

if (x + dx > 480) {

和

if (y + dy > 680) {

因為即使窗口的尺寸已更改，您也希望球保持在邊界內，所以我們需要獲取畫布的實際大小。 就在開始時，您定義了一個變量，該變量包含對畫布的引用。

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

如您所見，我們正在使用窗口的大小更新畫布的width和height屬性。

剩下的只是將您的兩個摘要合並為一個-沒什么大不了的。 這是一個工作示例：

 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> 

Answer 2

我認為您應該更改“彈跳”語句，我將使用半徑而不是dx和dy。 例如，如果x +圓的半徑大於寬度，則反轉方向，在這種情況下，半徑為100，因此：

<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 + 100 > canvas.width) {
        dx = -dx;
      }

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

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

      if (y - 100 < 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>