javascript - HTML5 Canvas 上的drawImage 出现奇怪的错误

Question

JsFiddle(注意:它不显示任何内容，这只是我以更简洁的格式显示代码的一种方式)http://jsfiddle.net/h6tVR/

我是 HTML5 Canvas 新手，决定尝试一下，看看我能用它做什么。到目前为止，我已经能够在 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();

}

我遇到了一个奇怪的问题。当我加载它时，大多数时候，只有图 block 会加载。到目前为止，我已经尝试了一些方法，我已经切换了 GameClosure.loadTiles() and GameClosure.loadSprite();调用以查看加载顺序是否有任何差异。事实并非如此。我什至尝试创建第二个上下文，并将图 block 分配给一个上下文，将 Sprite 分配给另一个上下文，但这没有什么区别。注释掉图 block 调用会正确生成 Sprite 。

事情变得更奇怪了。我快速刷新页面，我注意到偶尔(没有模式，有时可能连续发生 3 次，其他时候每 20 次)图 block 会加载，并且 Sprite 会按照我的预期加载到顶部到。

这个问题可以解决吗？我唯一的猜测是我的代码在某种程度上异步运行，并且创建图 block 的 for 循环在 Sprite 加载后完成，但查看我的代码，我看不出这种情况可能发生在哪里。

Answer 1

分离关注点。等待所有资源(和文档)加载，然后启动游戏。始终确保在分配 src 之前 Hook 事件处理程序以避免“随机”(实际上与缓存相关)行为。