画布为null和canvas.getContext不是一个函数

我忙于通过本教程工作，其中使用JavaScript和Canvas Element创建了2D游戏，我在两个错误方面遇到了麻烦。

我的初始代码是：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Game Canvas Workshop</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            canvas {
                background: #eee;
                display: block;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <canvas id"myCanvas" width="480" height="320"></canvas> 
        <!-- <script type="text/javascript" src="../game.js"></script> -->
        <script>
            //var test = document.getElementsByTagName("canvas");
            //console.log(test);
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
            console.log(ctx);

                ctx.beginPath();
                ctx.rect(20, 40, 50, 50);
                ctx.fill();
                ctx.closePath();
        </script>
    </body>
</html>

当我尝试使用document.getElementById抓住画布元素时，它会返回错误： canvas is null

因此，我更改了代码以使用document.getElementsByTagName获取画布元素，然后编写了一个测试将结果打印到控制台，然后返回了元素。

但是当我尝试使用canvas.getContext("2d")时，我会收到以下错误：canvas.getContext("2d") is not a function

我已经阅读了类似查询的大多数答案，并用我的代码尝试了它们，但它们似乎对我不起作用。

请帮助。

问题在这里(缺少" ="(

<canvas id"myCanvas" width="480" height="320"></canvas>

更改为：

<canvas id="myCanvas" width="480" height="320"></canvas>

完整代码

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Game Canvas Workshop</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            canvas {
                background: #eee;
                display: block;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <canvas id="myCanvas" width="480" height="320"></canvas> 
        <!-- <script type="text/javascript" src="../game.js"></script> -->
        <script>
            //var test = document.getElementsByTagName("canvas");
            //console.log(test);
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
            console.log(ctx);

                ctx.beginPath();
                ctx.rect(20, 40, 50, 50);
                ctx.fill();
                ctx.closePath();
        </script>
    </body>
</html>

您需要

<canvas id="myCanvas" width="480" height="320"></canvas>
          ^

ID的分配。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//console.log(ctx);
ctx.beginPath();
ctx.rect(20, 40, 50, 50);
ctx.fill();
ctx.closePath();

* { padding: 0; margin: 0; }
canvas { background: #eee; display: block; margin: 0 auto; }

<canvas id="myCanvas" width="480" height="320"></canvas>

 Please load your <script> after <body>. then this would work.
 <body>
 <input type="text" id="myInput" >
 <canvas id="myCanvas" width="200" height="100"></canvas>
 </body>
 <script>
 var c = document.getElementById("myCanvas");
 var ctx = c.getContext("2d");
 </script>

相关内容

最新更新

热门标签：