我的JavaScript示例有一些問題。請幫助

好的，所以我試圖讓頁面在加載結束時加載一些js。我想我得到了它，但現在它說我沒有收到一些與這一行：我的JavaScript示例有一些問題。請幫助

parseInt(document.getElementById('canvas').style.width);

它應該是「480像素」，但它是爲NaN。

它也表示線document.getElementById('ss')爲空。

下面是完整的東西：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <title>Cypri Designs</title>  
     <link href="style.css" rel="stylesheet" type="text/css" /> 
     <link rel="shortcut icon" href="/images/favicon1.ico" type="image/x-icon" />  
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
     <script type="text/javascript"> 
     <!--  
      //Variables to handle game parameters 
      var gameloopId; 
      var screenWidth; 
      var screenHeight; 
      var gameRunning = false; 
      var ctx; 

      var playerX = 0; 
      var playerY = 0; 

      //Create images 
      var playerImg = new Image(); 


      //Wait for DOM to load and init game 
      window.onload = function(){ 
       init(); 
      }; 

      function init(){ 
       initSettings(); 
       initImages(); 

       //add event handler to surrounding DIV to monitor mouse move and update mushroom's x position 
       /*$("#container").mousemove(function(e){ 
        mushroomX = e.pageX; 
       });*/ 

       //add event handler for clicking on start/stop button and toggle the game play 
       document.getElementById('ss').onclick = function(){ 

        toggleGameplay(); 
       }; 
      } 

      function initSettings() 
      { 
       //Get a handle to the 2d context of the canvas 
       ctx = document.getElementById('canvas').getContext('2d'); 

       //Calulate screen height and width 
       screenWidth = parseInt(document.getElementById('canvas').style.width); 
       screenHeight = parseInt(document.getElementById('canvas').style.height); 

       playerX = 100; 
       playerY = 100; 
      } 

      function initImages(){ 
       playerImg.src = "images/player.png"; 
      } 
      //Main game loop, it all happens here! 
      function gameLoop(){ 

       //Clear the screen (i.e. a draw a clear rectangle the size of the screen) 
       ctx.clearRect(0, 0, screenWidth, screenHeight); 

       ctx.save(); 
       ctx.drawImage(playerImg, 0, 0); 

       ctx.restore(); 
      } 

      //Start/stop the game loop (and more importantly that annoying boinging!) 
      function toggleGameplay() 
      { 
       gameRunning = !gameRunning; 

       if(gameRunning) 
       { 
        clearInterval(gameloopId); 
        gameloopId = setInterval(gameLoop, 10); 
       } 
       else 
       { 
        clearInterval(gameloopId); 
       } 
      } 
     //--> 
     </script> 

    </head> 

    <body> 
     <input id="ss" type="button" value="start/stop" /> 
     <div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;"> 
      <canvas id="canvas" width="480px" height="320px" > 
      Canvas not displaying. 
      </canvas> 
     </div> 
    </body> 
</html>

來源

2011-01-23 CyanPrime

爲了得到你應該使用，而不是樣式屬性的元素屬性寬度：

document.getElementById('canvas').offsetWidth

來源

2011-01-23 05:00:36 mVChr

工作。非常感謝你！ – CyanPrime 2011-01-23 06:18:38

「寬度」和「高度」你定義的屬性與畫布不屬於風格屬性;它們是畫布對象的屬性。它們定義畫布座標系的寬度和高度，而不是顯示高度和寬度。

畫布將填充其父容器，即480px和320px。作爲mVChr提到的，你可以通過「offsetWidth」（跨瀏覽器警告）獲得此，或通過使用像jQuery庫，將計算它爲你在一個跨瀏覽器的方式：

$("#canvas").width();

來源

2011-01-23 05:02:14 user85461

您的代碼幾個問題。首先，你得到寬度的這些線是你的NaN結果的原因。

  screenWidth = parseInt(document.getElementById('canvas').style.width); 
      screenHeight = parseInt(document.getElementById('canvas').style.height);

width和height屬性分別返回一個字符串值480px和320px。由於這些是字符串值，parseInt調用將返回NaN，因爲480px不是數字。我建議切換到offsetWidth作爲mVCr和user85461建議。

而我沒有看到document.getElementById（'ss'）行的任何問題。當我運行它時，點擊事件被設置並正確啓動。

來源

2011-01-23 05:10:42

我的JavaScript示例有一些問題。請幫助

回答

相關問題