html - 在 html5 画布上绘画不是绘画

Question

我无法在 html5 画布上绘制矩形。我正在调用此函数，但没有显示任何内容。我知道它的工作方式，因为我可以向它添加警报并且它工作得很好。有什么想法还是我只是傻。如果您想查看完整代码，该项目位于http://tetris.townsendwebdd.com，谢谢

paintContainer: function(){//doesn't work
    var cont = this.container;
    this.context.fillStyle = cont.color;
    this.context.fillRect(cont.x, cont.y, cont.width, cont.height);
}

paintContainer: function(){//works just fine
            alert('hi');
    var cont = this.container;
    this.context.fillStyle = cont.color;
    this.context.fillRect(cont.x, cont.y, cont.width, cont.height);
}

Answer 1

参考您网站上的代码，这是因为背景在您尝试绘制的填充已经绘制之后加载。因此，如果您将代码更改为：

background.onload = function() {
    context.drawImage(background, 0, 0);
    drawTitle();        
}

var b = new Board(context);

而是绘制Board内部onload：

background.onload = function() {
    context.drawImage(background, 0, 0);
    drawTitle();    
    var b = new Board(context); 
}

你会得到你想要的效果。我建议您创建一个在加载资源后继续游戏的方法内部调用的onload方法。