Question

对于游戏，我通过循环加载图像数组。它工作，但只有当我刷新页面！第一次加载页面时我什么也看不见。我不明白为什么会这样，因为一切都很好。

        for (var i = 0; i < 3; i++) {

            var canvas=document.createElement('canvas');
            var context=canvas.getContext("2d");
            var img=new Image();
            img.src= images[i];

            context.drawImage(img,10,10);

            document.body.appendChild(canvas);

        }

Answer 1

在尝试drawImage之前，您必须等待所有图片加载。

您可以等待设置img.onload回调函数，然后在回调中绘制图像。

这是图像加载器的一个例子（很多）：

// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

// put the paths to your images in imageURLs[]
var imageURLs=[];  
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/face1.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/face2.png");

// the loaded images will be placed in imgs[]
var imgs=[];
var imagesOK=0;
startLoadingAllImages(imagesAreNowLoaded);

// Create a new Image() for each item in imageURLs[]
// When all images are loaded, run the callback (==imagesAreNowLoaded)
function startLoadingAllImages(callback){

  // iterate through the imageURLs array and create new images for each
  for (var i=0; i<imageURLs.length; i++) {
    // create a new image an push it into the imgs[] array
    var img = new Image();
    // Important! By pushing (saving) this img into imgs[],
    //     we make sure the img variable is free to
    //     take on the next value in the loop.
    imgs.push(img);
    // when this image loads, call this img.onload
    img.onload = function(){ 
      // this img loaded, increment the image counter
      imagesOK++; 
      // if we've loaded all images, call the callback
      if (imagesOK>=imageURLs.length ) {
        callback();
      }
    };
    // notify if there's an error
    img.onerror=function(){alert("image load failed");} 
    // set img properties
    img.src = imageURLs[i];
  }      
}

// All the images are now loaded
// Do drawImage & fillText
function imagesAreNowLoaded(){

  // the imgs[] array now holds fully loaded images
  // the imgs[] are in the same order as imageURLs[]

  ctx.font="30px sans-serif";
  ctx.fillStyle="#333333";

  // drawImage the first image (face1.png) from imgs[0]
  // and fillText its label below the image
  ctx.drawImage(imgs[0],0,10);
  ctx.fillText("face1.png", 0, 135);

  // drawImage the first image (face2.png) from imgs[1]
  // and fillText its label below the image
  ctx.drawImage(imgs[1],200,10);
  ctx.fillText("face2.png", 210, 135);

}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

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

javascript drawimage仅适用于刷新

1 个答案: