在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);

而不是在onload中绘制Board

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

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