未捕获的TypeError:无法读取JavaScript中未定义的属性“width”_Javascript_Html_Canvas

未捕获的TypeError:无法读取JavaScript中未定义的属性“width”

javascript html canvas

未捕获的TypeError:无法读取JavaScript中未定义的属性“width”,javascript,html,canvas,Javascript,Html,Canvas,我创建了一个程序，可以使用w、a、s和d键在画布中上下左右移动矩形块。设置变量以表示画布宽度时出错。此代码行出现错误： var cw=canvas.width; 我一直试图在Chrome上使用此代码。以下是完整的代码： <html> <head> <script> var positionX=0; var positionY=0; var

我创建了一个程序，可以使用w、a、s和d键在画布中上下左右移动矩形块。设置变量以表示画布宽度时出错。此代码行出现错误：

    var cw=canvas.width;

我一直试图在Chrome上使用此代码。以下是完整的代码：

<html>
        <head>
            <script>
            var positionX=0;
            var positionY=0;
            var cw=canvas.width;
            var ch=canvas.height;

            var canvas=document.getElementById("canvas1");

            window.addEventListener("keydown", onKeyPress, true);

            function draw(){
                var canvas=document.getElementById("canvas1");
                var cw=canvas1.width;
                var ch=canvas1.height;
                var context=canvas.getContext("2d");
                context.clearRect(0, 0, canvas.width, canvas.height);

                context.fillStyle="green";
                context.fillRect(positionX, positionY, 100, 100);
                context.strokeStyle = 'black';
                context.stroke();
            }

        function onKeyPress(e){
            if (e.keyCode==87){
                positionY=Math.max(0,positionY-15);
            }
            if (e.keyCode==83){
                positionY=Math.min(cw-500,positionY+15);
            }
            if (e.keyCode==68){
                positionX=Math.min(ch-500,positionX+50);
            }
            if (e.keyCode==65){
                positionX=Math.max(0,positionX-50);
            }
        draw();
            }
            </script>
        </head>
        <body>
            <div id="firstDiv">
                <canvas id="canvas1" width="500" height="500" style="border: 1px solid black;"> </canvas>

            </div> 
        </body> 
    </html>

var canvas=document.getElementByIdcanvas1

应该是：

var canvas1=document.getElementByIdcanvas1

这里有一些问题

        var positionY=0;
        var cw=canvas.width;
        var ch=canvas.height;

此处未定义画布变量。您正在尝试在设置画布的值之前访问画布

var canvas=document.getElementById("canvas");
var cw=canvas.width;
var ch=canvas.height;

及

没有变量canvas1，因此应该

            var canvas1=document.getElementById("canvas1");
            var cw=canvas1.width;
            var ch=canvas1.height;

快速修复：

在呈现画布之前，不应运行与画布dom相关的脚本。

下面是一个示例

您应该使用window.onload函数确保在尝试访问任何DOM对象之前加载HTML。这在语法上将JavaScript与HTML分离

  var positionX = 0;
  var positionY = 0;
  var canvas = {};
  var cw = 0;
  var ch = 0;
  var bw = 100;
  var bh = 100;

 // Set up initial values, after the page loads 
 window.onload = function(){
     positionX = 0;
     positionY = 0;
     canvas = document.getElementById("canvas");
     cw = canvas.width;
     ch = canvas.height;
     draw();
  };
  // Add keyboard listener
  window.addEventListener("keydown", onKeyPress, true);

  function draw(){
      canvas=document.getElementById("canvas");
      cw=canvas.width;
      ch=canvas.height;
      context=canvas.getContext("2d");

      context.clearRect(0, 0, canvas.width, canvas.height);
      context.fillStyle="green";

      context.fillRect(positionX, positionY, bw, bh);
      context.strokeStyle = 'black';
      context.stroke();
  }

  function onKeyPress(e){
    var dx = 50;
    var dy = 15;
    if (e.keyCode == 87){
        console.log("w(87) up");
        positionY=Math.max(0,positionY-dy);
    }
    else if (e.keyCode == 83){
        console.log("s(83) down");
        positionY = Math.min((positionY+dy), (ch-bh));
    }
    else if (e.keyCode == 68){
        console.log("d(68) right");
        positionX = Math.min((positionX+dx), (cw-bw));
    }
    else if (e.keyCode == 65){
        console.log("a(65) left");
        positionX=Math.max(0,positionX-dx);
    }
    draw();
  }

canvas1是在哪里定义的？当脚本运行时，HTML还没有在DOM中。在你完成任务后写脚本HTML@user1049876你真的不应该编辑问题的标题，除非让它更清楚。如果其他人想引用此示例，他们不会搜索已解决的错误：已解决最好保留原始问题，或澄清问题所在。停止删除问题中的所有内容。你从你的问题中删除了所有相关信息，这对你的问题和帮助你的人都是有害的。你在这个问题上做到了，你在你身上做到了几乎一样。在问题解决后，请停止删除部分或全部问题-如果代码被删除，那么这个问题将不再对未来的访问者有用。对我很有帮助。谢谢

</head>
<body>
    <div id="firstDiv">
        <canvas id="canvas" width="500" height="500" style="border: 1px solid black;"> </canvas>

    </div>
    <script>
      var positionX=0;
      var positionY=0;
      var canvas=document.getElementById("canvas");
      var cw=canvas.width;
      var ch=canvas.height;


      window.addEventListener("keydown", onKeyPress, true);

      function draw(){
          var canvas=document.getElementById("canvas");
          var cw=canvas.width;
          var ch=canvas.height;
          var context=canvas.getContext("2d");
          context.clearRect(0, 0, canvas.width, canvas.height);

          context.fillStyle="green";
          context.fillRect(positionX, positionY, 100, 100);
          context.strokeStyle = 'black';
          context.stroke();
      }

      function onKeyPress(e){
        if (e.keyCode==87){
            positionY=Math.max(0,positionY-15);
        }
        if (e.keyCode==83){
            positionY=Math.min(cw-500,positionY+15);
        }
        if (e.keyCode==68){
            positionX=Math.min(ch-500,positionX+50);
        }
        if (e.keyCode==65){
            positionX=Math.max(0,positionX-50);
        }
        draw();
      }
    </script>
</body>

  var positionX = 0;
  var positionY = 0;
  var canvas = {};
  var cw = 0;
  var ch = 0;
  var bw = 100;
  var bh = 100;

 // Set up initial values, after the page loads 
 window.onload = function(){
     positionX = 0;
     positionY = 0;
     canvas = document.getElementById("canvas");
     cw = canvas.width;
     ch = canvas.height;
     draw();
  };
  // Add keyboard listener
  window.addEventListener("keydown", onKeyPress, true);

  function draw(){
      canvas=document.getElementById("canvas");
      cw=canvas.width;
      ch=canvas.height;
      context=canvas.getContext("2d");

      context.clearRect(0, 0, canvas.width, canvas.height);
      context.fillStyle="green";

      context.fillRect(positionX, positionY, bw, bh);
      context.strokeStyle = 'black';
      context.stroke();
  }

  function onKeyPress(e){
    var dx = 50;
    var dy = 15;
    if (e.keyCode == 87){
        console.log("w(87) up");
        positionY=Math.max(0,positionY-dy);
    }
    else if (e.keyCode == 83){
        console.log("s(83) down");
        positionY = Math.min((positionY+dy), (ch-bh));
    }
    else if (e.keyCode == 68){
        console.log("d(68) right");
        positionX = Math.min((positionX+dx), (cw-bw));
    }
    else if (e.keyCode == 65){
        console.log("a(65) left");
        positionX=Math.max(0,positionX-dx);
    }
    draw();
  }