Question

我创建了一个程序，可以使用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>

Answer 1

这里有一些问题

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

这里的canvas变量是undefined。您在设置其值之前尝试访问canvas。

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

和

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

没有变量canvas1所以这应该是

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

Answer 2

这是working live demo

您应该使用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();
  }

Answer 3

var canvas = document.getElementById（＆＃34; canvas1＆＃34;）;

应该是：

var canvas1 = document.getElementById（＆＃34; canvas1＆＃34;）;

Answer 4

快速修复：

</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>

与画布dom相关的脚本不应在画布渲染之前运行。

未捕获的TypeError：无法读取属性＆＃39; width＆＃39;在JavaScript中未定义

4 个答案: