如何使用动画移动 canvas 上的元素？

Question

我一直在寻找如何使用 JavaScript 在 canvas 上移动某个方块，但没有找到太多。我已经完成了一个它在每一帧中删除自身并替换自身的方法，但我希望它更平滑和动画。这是我的代码：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid grey;"></canvas><br />
<button onclick="#">Move Up</button>
<script>
canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(20, 60, 20, 20);
</script>

到目前为止，该按钮没有任何作用，是否有我可以添加的功能来移动方块？（在这种情况下）

Answer 1

要制作流畅的动画，请检查 requestAnimationFrame 函数 (https://developer.mozilla.org/fr/docs/Web/API/Window/requestAnimationFrame)。

这里是您的代码示例：

canvas = document.getElementById('myCanvas');
ctx = canvas.getContext('2d');

var squareY = 60;
var isButtonPressed = false;

ctx.fillStyle = '#FF0000';
ctx.fillRect(20, squareY, 20, 20);

function moveUp() {
  window.requestAnimationFrame(moveUp);

  if (isButtonPressed) {
    squareY -= 10 / 16;
  }

  squareY = Math.max(squareY, 5);

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#FF0000';
  ctx.fillRect(20, squareY, 20, 20);
}

function onMouseUp() {
  isButtonPressed = false;
}

function onMouseDown() {
  isButtonPressed = true;
}
canvas = document.getElementById('myCanvas');
ctx = canvas.getContext('2d');

var squareY = 60;
var isButtonPressed = false;

ctx.fillStyle = '#FF0000';
ctx.fillRect(20, squareY, 20, 20);

function moveUp() {
  window.requestAnimationFrame(moveUp);

  if (isButtonPressed) {
    squareY -= 10 / 16;
  }

  squareY = Math.max(squareY, 5);

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#FF0000';
  ctx.fillRect(20, squareY, 20, 20);
}

function onMouseUp() {
  isButtonPressed = false;
}

function onMouseDown() {
  isButtonPressed = true;
}

window.addEventListener('keydown', function (e) {
  if (e.key == 'ArrowUp') {
    // if the arrow key is pressed
    squareY -= 10 / 16;
  }
});

moveUp();

<canvas id="myCanvas" width="200" height="100" style="border:1px solid grey;"></canvas><br />
<button onmousedown="onMouseDown()" onmouseup="onMouseUp()">Move Up</button>
<script>
</script>

如何使用动画移动 canvas 上的元素？

How do I move an element on a canvas around with an animation?

html

javascript

canvas

move