Question

我尝试编写Kara的在线版本（您可以编程的小瓢虫找到放置在网格中的叶子）。为此，我编写了一些函数来将所需的对象绘制到网格中。这些功能是：

Kara.prototype.draw_object = function (x, y, asset) {
    pos = this.calc_pos(x,y);
    var img = new Image();
    img.onload = function() {
        c.drawImage(img, pos.x, pos.y, 40, 40);
    }
    img.src = asset;
}

Kara.prototype.draw_tree = function(x,y) {
    this.draw_object(x,y,this.assets.asset_tree);
}

Kara.prototype.draw_leaf = function(x,y) {
    this.draw_object(x,y,this.assets.asset_leaf);
}

Kara.prototype.draw_mush = function(x,y) {
    this.draw_object(x,y,this.assets.asset_mush);
}

资产对象在init函数中定义，并指向png文件，如img/tree.png。 calc_pos根据网格中的位置计算绝对x和y位置。

还有很多工作要做。因为我想在每次浏览器重新加载时绘制一些示例内容，所以我写了一个sample函数：

Kara.prototype.sample = function() {
    kara = this;
    kara.draw_kara(1,1);  // Not listed above. Draws the little laddybug
    setTimeout(function() {
        kara.draw_tree(2,1);
    }, 4);
    setTimeout(function() {
        kara.draw_mush(3,1);
    }, 8);
    setTimeout(function() {
        kara.draw_leaf(4,1);
    }, 12);
}

没有超时，所有内容都会被[4][1]吸引。因为当我在Developer控制台中键入每个命令时它起作用，我试图通过在draw命令之间放置一些等待时间来找到bug的根。

如果命令之间有0.5秒，一切都很完美。有4毫秒它可以正常工作或一些对象放在彼此之上。

是否有人知道发生这种情况的问题或者可以给我一个暗示这个错误的起源？

在Canvas中同时绘制两个图像

0 个答案: