javascript - Canvas :按下键时的奇怪行为

Question

默认情况下，我的 Canvas 矩形应该从左向右移动。按下键时，它应该开始向下移动。

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    x = 0,
    y = 0;

function draw(x_move, y_move) { 
  requestAnimationFrame(function() {
    draw(x_move, y_move);
  }); 
  ctx.beginPath();
  ctx.rect(x, y, 20, 20);
  ctx.clearRect(0, 0, canvas.width, canvas.height); 
  ctx.fillStyle = "#ffffff";
  ctx.fill();
  ctx.closePath();
  x = x + x_move;
  y = y + y_move; 
} 

draw(1, 0);

document.addEventListener('keydown', function(event) {
  //console.log(event.keyCode); 
  if (event.keyCode == 40) {
    draw(0, 1); 
  }
});

canvas { background-color: red; }

<canvas id="canvas" width="600" height="400"></canvas>

使用上面的代码，你至少会注意到两个问题:

1. 当按下键时，矩形向下移动，但也一直向右移动。
2. 当您连续多次按下向下键时，速度会加快。

我该如何解决这些问题？

Answer 1

查看你在哪里打电话

requestAnimationFrame(function() {
    draw(x_move, y_move);
  });

您现在正在递归调用 draw()。

现在每次调用 draw() 时，它都会被一遍又一遍地调用。当您从按键事件调用它时，您调用它的频率是原来的 2 倍，然后在您第二次按下它时调用它的频率是 3 倍，等等。

我不完全清楚你的目标是什么，但如果你只想通过按下来调整正方形的轨迹，你可以这样做:

document.addEventListener('keydown', function(event) {
  //console.log(event.keyCode); 
  if (event.keyCode == 40) {
    adjustDownwardTrajectory();
  }
});

并让 adjustDownwardTrajectory() 改变一些 downwardTrajectory 变量，这样:

function draw(x_move, y_move) { 
  requestAnimationFrame(function() {
    draw(x_move, y_move);
  }); 
  ctx.beginPath();
  ctx.rect(x, y, 20, 20);
  ctx.clearRect(0, 0, canvas.width, canvas.height); 
  ctx.fillStyle = "#ffffff";
  ctx.fill();
  ctx.closePath();
  x = x + x_move;
  y = y + y_move + downwardTrajectory;
}