如何在画布上随动画移动元素？

Question

我一直在寻找如何使用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在画布上移动特定正方形的方法，但还没有发现太多。我已经完成了一个删除并替换每一帧的操作，但是...

Answer 1

要制作平滑的动画，请检查requestAnimationFrame功能（https://developer.mozilla.org/fr/docs/Web/API/Window/requestAnimationFrame）。