一个画布有多个子图_是否可以在HTML5画布中使用多个图片？

I'm trying to load 10 different images into a canvas. My plan is to eventually animate these images but right now they seem to be overwriting one another. Here is my code:

var DrawLetters = function()

{

for (i = 0; i < howManyLetters; i++)

{

thisWidth = letters[i][0];

thisHeight = letters[i][1];

imgSrc = letters[i][2];

letterImg = new Image();

letterImg.onload = function()

{

context.drawImage(letterImg,thisWidth,thisHeight);

}

letterImg.src = imgSrc;

}

};

letters is an array with 10 elements where each element contains a path to the image. Any help on this would be greatly appreciated.

解决方案

I've tried your code and the onload method always use the LAST value of the vars, not the value when the array was iterated.

Try setting the X and the Y to properties of the image object:

// I assume you are storing the coordinates where the letters must be

letterImg.setAtX = letter[i][XPOS];

letterImg.setAtY = letter[i][YPOS];

and on the onload:

context.drawImage(this, this.setAtX, this.setAtY);

this is the image raising the onload event.

Edit I've changed the properties used to carry the coordinates. Now they're setAtX/Y. You cannot use x and y because they're reserved.