Uncaught TypeError：無法讀取在JavaScript中未定義的屬性'寬度'

我已經創建了一個程序，可以使用w，a，s和d鍵在畫布內向上，向下，向右和向左移動矩形塊。設置表示畫布寬度的變量時出錯。錯誤出現在這行代碼：Uncaught TypeError：無法讀取在JavaScript中未定義的屬性'寬度'

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>

來源

2016-01-22 user1049876

'canvas1'定義在哪裏？ – Rayon

當您的腳本運行時，您的HTML不在DOM中。在您的HTML –

@ user1049876之後編寫腳本，您不應編輯問題的標題，除非使其更清楚。如果其他人想參考這個例子，他們不會搜索*已解決錯誤：已解決*最好保留原始問題，或澄清問題是什麼。 – sdc

這裏是一個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(); 
    }

來源

2016-01-22 07:36:07 sdc

var canvas = document.getElementById（「canvas1」）;

應該是：

變種canvas1 =的document.getElementById（「canvas1」）;

來源

2016-01-22 06:25:55 Okcerk

的一些問題在這裏

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

這裏帆布變量是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;

來源

2016-01-22 06:26:39

速戰速決：

</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相關的腳本不應在畫布呈現之前運行。

來源

2016-01-22 06:29:51

此代碼不起作用 – sdc

Uncaught TypeError：無法讀取在JavaScript中未定義的屬性'寬度'

回答

相關問題