javascript - 首次加载时绘制到画布失败。刷新，它的工作原理

Question

这是我的功能。

drawButtons: function() {
    gameController.ctx.strokeStyle='pink';
    gameController.ctx.fillStyle='rgba(128,128,128,1)';
    gameController.ctx.lineWidth=2;
    this.roundedRect(gameController.ctx,105,162,160,50,10,true,true);
    this.roundedRect(gameController.ctx,105,240,160,50,10,true,true);

    gameController.ctx.fillStyle = 'rgba(153,051,000,1)';
    gameController.ctx.font = "35px AR DARLING";
    gameController.ctx.fillText("1 Player",120,200);
    gameController.ctx.fillText("2 Player",120,278);
    }

它没有在第一次加载网页时被绘制。如果有人希望看到，我可以添加代码来显示我调用该方法的位置。也许我必须添加.onload（），但我只知道在向画布添加图像时如何做到这一点，而不是fillText等。谢谢。

Answer 1

我的 drawButtons 方法中的 window.onload 是解决方案。

drawButtons: function() {
    window.onload = (function(){
    gameController.ctx.strokeStyle='pink';
    gameController.ctx.fillStyle='rgba(128,128,128,1)';
    gameController.ctx.lineWidth=2;
    nonGameContent.roundedRect(gameController.ctx,105,162,160,50,10,true,true);
    nonGameContent.roundedRect(gameController.ctx,105,240,160,50,10,true,true);

    gameController.ctx.fillStyle = 'rgba(153,051,000,1)';
    gameController.ctx.font = "35px AR DARLING";
    gameController.ctx.fillText("1 Player",120,200);
    gameController.ctx.fillText("2 Player",120,278);
    })},