javascript - DrawImage将不会在第一帧加载

我的画布上有一个简单的绘制图像，但不会显示在第一帧上。

这让我发疯，我不知道为什么它不这样做！

这是我的脚本：

img = new Image();
img.src = 'images/0.png'; //preLoad the image


window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.oRequestAnimationFrame      ||
          window.msRequestAnimationFrame     ||
          function( callback,  element){
            window.setTimeout(callback, 1000 / 60);
          };
})(); //frames per second


function gameUpdate(){
    previous = 0;
    requestAnimFrame( gameUpdate );
    draw();
}

然后draw()函数具有以下内容：

//doesn't display on first fame
canvas['canvas1'].ctx.drawImage(img, 100, 150);

//displays on first frame
canvas['canvas1'].ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
canvas['canvas1'].ctx.fillRect (30, 30, 55, 50);

FillRect可以正常工作，但是第一帧的drawImage不能正常工作，这可能是为什么的任何想法？

最佳答案

我认为您应该通过在requestAnimFrame函数之外调用gameUpdate来启动动画循环

requestAnimFrame(gameUpdate)

您可能还需要确保图像已实际加载

var img = new Image();
img.onload = function() {
    // do the draw image here
}
img.src = 'images/0.png'; //preLoad the image

关于javascript - DrawImage将不会在第一帧加载，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13731882/