我有一块画布，我们可以在其中用箭头键移动形状。

但是，我希望图像移动而不是移动形状，所以无法解决。
有什么帮助吗？

到目前为止，图像已显示，但我无法移动。
我在互联网上尝试了很多东西，但是没有用。图片的ID为image。

这是我当前的代码：

 car = {
  image : img,//jumping: true,x:180,// center of the canvas
  x_velocity:0,y: 160,y_velocity:0,};  


controller = {

  left: false,right: false,up: false,down: false,keyListener:function(event) {

    var key_state = (event.type == "keydown")?true:false;

    switch(event.keyCode) {

      case 37:// left key
        controller.left = key_state;
      break;
      case 38:// up key
        controller.up = key_state;
      break;
      case 39:// right key
        controller.right = key_state;
      break;
      case 40: //down key
        controller.down = key_state;

    }

  }

};


loop = function() {

  if (controller.up) {
    car.image.y_velocity -= 0.5;

  }

  if (controller.left) {
    car.image.x_velocity -= 0.5;
  }

  if (controller.right) {
    car.image.x_velocity += 0.5;
  }

  if (controller.down) {
    car.image.y_velocity += 0.5;
  }

  car.image.x += car.image.x_velocity;
  car.image.y += car.image.y_velocity;
  car.image.x_velocity *= 0.9;// friction
  car.image.y_velocity *= 0.9;

  // if car.image is going off the left of the screen
  if (car.image.x < -32) {
    car.image.x = 1190;
// if car.image goes past right boundary
  } else if (car.image.x > 1190) {
    car.image.x = -32;
// if car.image goes past lower boundary
  } else if (car.image.y > 790) {
    car.image.y = 0;
// if car.image goes past upper boundary
  } else if (car.image.y < -32) {
    car.image.y = 790;
  }

  context.drawImage(car.image,car.x,car.y);

  // call update when the browser is ready to draw again
  window.requestAnimationFrame(loop);

};

window.addEventListener("keydown",controller.keyListener) //press down and it moves
window.addEventListener("keyup",controller.keyListener);  //lift finger and it stops
window.requestAnimationFrame(loop);

这是形状移动时的代码：

rectangle = {
  height:20,width:20,// location @ center of the canvas
  x_velocity:0,};

controller = {

  left: false,keyListener:function(event) {

    var key_state = (event.type == "keydown")?true:false;

    switch(event.keyCode) {

      case 37:// left key
        controller.left = key_state;
      break;
      case 38:// up key
        controller.up = key_state;
      break;
      case 39:// right key
        controller.right = key_state;
      break;
      case 40: //down key
        controller.down = key_state;

    }

  }

};

loop = function() {

  if (controller.up) {
    rectangle.y_velocity -= 0.5;
  }

  if (controller.left) {
    rectangle.x_velocity -= 0.5;
  }

  if (controller.right) {
    rectangle.x_velocity += 0.5;
  }

  if (controller.down) {
    rectangle.y_velocity += 0.5;
  }

  rectangle.x += rectangle.x_velocity;
  rectangle.y += rectangle.y_velocity;
  rectangle.x_velocity *= 0.9;// friction
  rectangle.y_velocity *= 0.9;// friction


  // if rectangle is going off the left of the screen
  if (rectangle.x < -32) {
    rectangle.x = 1190;
// if rectangle goes past right boundary
  } else if (rectangle.x > 1190) {
    rectangle.x = -32;
// if rectangle goes past lower boundary
  } else if (rectangle.y > 790) {
    rectangle.y = 0;
// if rectangle goes past upper boundary
  } else if (rectangle.y < -32) {
    rectangle.y = 790;
  }

  context.fillRect(0,1200,800);// x,y,width,height
  context.fillStyle = "white";// hex for red
  context.beginPath();
  context.rect(rectangle.x,rectangle.y,rectangle.width,rectangle.height);
  context.fill();

  // call update when the browser is ready to draw again
  window.requestAnimationFrame(loop);

};

window.addEventListener("keydown",controller.keyListener);  //lift finger and it stops
window.requestAnimationFrame(loop);