javascript - 清除屏幕并移动html5 Canvas 中的元素

Question

我正在使用 HTML5 Canvas 和 JS 开发一款赛车游戏。所以当汽车移动时，我想清除之前的屏幕并移动汽车。但它没有按预期工作。

代码:

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var y = 110;
var x = 10;
var speed = 0.5;

function movePlayer(){
  //context.clearRect(0, 0, canvas.width, canvas.height);
  context.beginPath();
  var player = new Image();
  player.src = "http://www.clker.com/cliparts/J/W/v/e/2/z/vertical-top-view-of-car-md.png";
  player.onload = function(){
    context.drawImage(player, x, y, player.width*0.4, player.height*0.13);
  }

  y = y - speed;

  if (y < -15){
    y = 110;
  } 

  requestAnimationFrame(movePlayer);
}

requestAnimationFrame(movePlayer)

链接:https://jsfiddle.net/jackysatpal/6j4c5dod/1/

Answer 1

感谢 Patrick Evans，我弄清楚了问题所在。创建新图像并设置源时犯了一个错误。更改了代码，现在可以使用了。

代码:

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var y = 110;
var x = 10;
var speed = 1.5;

var player = new Image();
player.src = "./images/p1.png";

function movePlayer(){
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(player, x, y, player.width*0.4, player.height*0.13);

  y = y - speed;

  if (y < -15){
    y = 110;
  } 

  requestAnimationFrame(movePlayer);

}

requestAnimationFrame(movePlayer)

链接:https://jsfiddle.net/jackysatpal/6j4c5dod/4/