Question

嘿我正在制作响应式画布。我不知道有什么不对，请帮助我。在html或javascript中存在问题。我不知道。我不知道标准关键字。请帮我解决。我正在使用Brackets。

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #myCanvas {
                border: 2px solid black;
            }
            input {
                border: .5px solid black;
                padding: 2px;
            }

        </style>
        <script>
            function drawRect() {
                var ctx = document.getElementById('myCanvas').getContext('2D');
                var x = document.getElementById("x").value;
                var y = document.getElementById("y").value;
                var w = document.getElementById("w").value;
                var h = document.getElementById("h").value;
                ctx.fillStyle = "black";
                ctx.fillRect( x, y, w, h);
                reset()
            }
        </script>   
    </head>
    <body>
        <canvas id="myCanvas" width="400" height="300"></canvas>
        <br />
        <input id="x" type="number" value="10" step="5" min="0" max="200">
        <input id="y" type="number" value="10" step="5" min="0" max="200">
        <input id="w" type="number" value="10" step="5" min="0" max="400">
        <input id="h" type="number" value="10" step="5" min="0" max="300">
        <button id="mybtn" onclick="drawRect">Draw</button>
    </body>
</html>

Answer 1

您应该使用.getContext('2d')代替.getContext('2D')。

此外，drawRect没有括号，正如Anthony McGrath所提到的那样。

检查出来：

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #myCanvas {
                border: 2px solid black;
            }
            input {
                border: .5px solid black;
                padding: 2px;
            }

        </style>
        <script>
            function drawRect() {
                var ctx = document.getElementById('myCanvas').getContext('2d');
                var x = document.getElementById("x").value;
                var y = document.getElementById("y").value;
                var w = document.getElementById("w").value;
                var h = document.getElementById("h").value;
                ctx.fillStyle = "black";
                ctx.fillRect( x, y, w, h);
            }
        </script>   
    </head>
    <body>
        <canvas id="myCanvas" width="400" height="300"></canvas>
        <br />
        <input id="x" type="number" value="10" step="5" min="0" max="200">
        <input id="y" type="number" value="10" step="5" min="0" max="200">
        <input id="w" type="number" value="10" step="5" min="0" max="400">
        <input id="h" type="number" value="10" step="5" min="0" max="300">
        <button id="mybtn" onclick="drawRect()">Draw</button>
    </body>
</html>

＆＃13;

我正在制作一个html画布游戏。类型

1 个答案: