播放器未顯示在畫布上（Javascript + HTML + CSS）

Question

我有一個名為index.html的文件，正在將它放在html5游戲上。 到目前為止，我所做的只是創建了一張畫布，

<canvas id="mainCanvas"></canvas>

即瀏覽器寬度的25％，高度為400px。

canvas {
    background-color: #000000;
    width: 25%;
    height: 400px;
}

然后，在其中創建腳本標簽，並將畫布連接到該標簽，然后添加上下文。

var canvas = document.getElementById("mainCanvas");
var context = document.getElementById("2d");

現在我有一個玩家變量。

var player = {
        x: 10,
        y: 10,
        width: 30,
        height: 30
};

然后我有一個setInterval函數，該函數運行一個名為game的函數，該函數運行兩個名為update和render的函數。

    function game() {
        update();
        render();
    }

    function update() {

    }

    function render() {
        context.fillStyle = "white";
        context.fillRect(player.x, player.y, player.width, player.height);
    }

    setInterval(function() {
        game();
    }, 1000/30);

如您所見，我用播放器制作了一個矩形。 為什么不顯示？ 矩形未出現在屏幕上。 我究竟做錯了什么？

Answer 1

錯別字：

為了調用畫布上下文，您需要使用canvas.getContext('2d')而不是getElementById()