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

最佳答案

这里有一个working live demo
在尝试访问任何DOM对象之前,应该使用window.onload函数确保加载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();
  }

10-05 20:54
查看更多