JsFiddle（注意：它什么也没有显示，这只是我以更整齐的格式显示代码的一种方式）http://jsfiddle.net/h6tVR/
我是HTML5 canvas的新手，因此决定尝试并尝试使用它。到目前为止，我已经能够在画布上绘制本地托管的图像，甚至可以做一些基本的平铺操作：
window.onload = function(){
var GameClosure = function() {
var canv = document.getElementById("canv");
var canvContext = canv.getContext("2d");
var sprite = new Image();
sprite.src = "sprite.png"
var tile = new Image();
tile.src = "tile.png"
function loadSprite(){
sprite.onload = function(){
canvContext.drawImage(sprite, 50, 50);
};
}
function loadTiles(){
tile.onload = function(){
for(var i = 0; i < 800; i += 16){
for(var r = 0; r < 608; r += 16){
canvContext.drawImage(tile, i, r);
}
}
};
}
return{
loadTiles: loadTiles,
loadSprite: loadSprite
};
}();
GameClosure.loadTiles();
GameClosure.loadSprite();
}
我对此有一个奇怪的问题。在大多数情况下，当我加载时，只会加载图块。到目前为止，我已经尝试了一些方法，我已经切换了GameClosure.loadTiles() and GameClosure.loadSprite();呼叫以查看加载顺序是否有所不同。没有。我什至尝试创建第二个上下文，并将磁贴分配给一个上下文，将精灵分配给另一个上下文，但这没有什么区别。注释掉tile调用会正确生成精灵。
它变得更加奇怪。我正在快速刷新页面，我发现偶尔（没有模式，有时可能连续发生3次，其他时候每20次发生一次），磁贴会加载，而精灵会按我期望的那样加载到顶部到。
可以解决这个问题吗？我唯一的猜测是，我的代码在某种程度上异步运行，并且在加载精灵之后，创建切片的for循环已经完成，但是从我的代码来看，我看不到这可能发生在哪里。
设置onload处理程序时，您的javascript将在资源在后台加载的同时继续运行。资源加载后将执行处理程序。您无法确定何时发生以及以什么顺序发生。
当您有多个资源并且要在上一个资源加载后立即调用绘图函数时，可以有一个全局预加载器对象。每个onload-handler应该在预加载器上调用一个函数，以通知它资源已加载。该函数应检查是否已报告所有资源，并且在这种情况下，请执行draw函数。
同样，当您设置onload-handler且资源已被加载时。设置后.src，资源在浏览器缓存中，它将立即加载。所以，你总是需要先设置.onload和再设置.src。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句