javascript - js getContext 停止执行进一步的代码

我的 JavaScript 代码中有一个有效的 getContext，但由于某种原因，此方法之后没有执行任何操作。在这里，我添加了两个警报，但只运行其中一个:

<!DOCTYPE html>
<html>
    <body>

    <canvas id="myCanvas"
    width="0"
    height="0"
    style="border:5px solid #888888; fill: solid #DDDDDD;"
        Your browser does not support the HTML5 canvas tag.
    </canvas>

    <script>
        // basic vars
        var squareDim = 25;
        var screenWidth = 10;
        var screenHeight = 20;
        // setting up the canvas
        var canvas = document.getElementById("myCanvas");
        canvas.width = screenWidth * squareDim;
        canvas.height = screenHeight * squareDim;
        alert(1)
        var ctx = c.getContext("2d");
        alert(2);

        // draw a single square
        function putSquare(color, x, y) {
            ctx.fillStyle = color;
            ctx.fillRect(x * squareDim, y * squareDim, squareDim, squareDim);
        }

        for (i=0; i<screenHeight; i++) {
            putSquare("#FF0000", i, 0);
        }

    </script>

</body>

有人知道我哪里搞砸了吗？

最佳答案

您正在调用 c.getContext(...)，您没有声明 c 变量 - 您需要在 canvas 上调用它> 相反: