如何使用动画移动画布上的元素？答案

【问题标题】：How do I move an element on a canvas around with an animation?如何使用动画移动画布上的元素？
【发布时间】：2020-06-01 11:03:29
【问题描述】：

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

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

到目前为止，按钮什么也没做，我可以添加一个可以移动方块的功能吗？（在这种情况下）

【问题讨论】：

标签： javascript html canvas move

【解决方案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>

【讨论】：

谢谢！这行得通，现在是否可以仅在按住按钮时才移动正方形？
@maxmeinz 我刚刚编辑了答案，在上面查看。
@maxmeinz 我在示例中添加了window.addEventListener('keydown')。每次按下键时都会调用该函数，我测试按下的键是否是 ArrowUp，如果是，则向上移动方块。
好的，谢谢，我不再打扰你了，哈哈。我之前尝试过的类似，它是：window.onkeypress = function(event) { if (event.keyCode == 38) { squareY -= 10 / 16;我认为这个评论会弄乱缩进。
不过，方块在高刷新率屏幕中移动得更快。也许您应该使用第一个参数检查正方形应该移动多少。