我认为问题在于你没有将变量放入闭包中。更改这一行:
grid[row][col].onload = function () {ctx.drawImage(grid[row][col], x, y);};
To
grid[row][col].onload = function () {window.alert('row:' + row + ' col:' + col);};
And 你会看到什么 http://www.boogdesign.com/examples/canvas/multiple-onload-broken.html是您的警报在每次调用时返回相同的行和列值。你需要得到这些包含在闭包中的变量 http://blog.leosoto.com/2007/10/javascript-closures-and-parameter.html这样您的函数就可以处理值而不是引用:
var drawCanvasImage = function(ctx,grid,row,col,x,y) {
return function() {
ctx.drawImage(grid[row][col], x, y);
}
}
Then do:
grid[row][col].onload = drawCanvasImage(ctx,grid,row,col,x,y);
此示例页面 http://www.boogdesign.com/examples/canvas/multiple-onload.html我在 Firefox 和 Chrome 中工作。