Как создать изменяемый размер холста html5 для прыгающего шара javascript?

Question

Я пытаюсь создать вращающийся прыгающий шар, используя JavaScript внутри холста html5. Я хочу, чтобы холст соответствовал ширине и высоте окна браузера при изменении размера

Из исследования решения я наткнулся на два отдельных раздела кода 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.высота .

Итак, два вышеуказанных оператора if становятся:

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

Теперь, если пользователь изменяет размер окна, будет вызвана следующая функция:

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

Как видите, мы обновляем свойства ширины и высоты холста размером окна.

Остальное - это просто объединение двух фрагментов в один - что не составляет большого труда.Вот рабочий пример:

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>