Question

我的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>

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

Answer 1

您正在调用c.getContext(...)，您没有声明c变量 - 您需要在canvas上调用此代码：

var ctx = canvas.getContext('2d');

将来您可以在浏览器的JavaScript控制台中调试此类内容。在您的JavaScript控制台中，您会发现此处的代码引发了以下错误：

未捕获的ReferenceError：c未定义

请参阅：How to open the JavaScript console in different browsers?

js getContext停止执行更多代码

1 个答案: