未捕獲ReferenceError：ctx未定義

我試過一切解決這個問題和nothings工作。在這裏發帖是我的最後一招。未捕獲ReferenceError：ctx未定義

我想編碼一個簡單的畫布元素和動態加載一切，沒有任何工作。在game.js：33上，我一直在Google控制檯中發現錯誤「Uncaught ReferenceError：ctx is not defined」。

我原本以爲是因爲common.js被加載後的其他2個JavaScript文件，所以我做了一個加載器文件加載每個JS文件以我想要的順序。我用$ .getScript（）和$ .when（）函數做了這個。不幸的是，這不起作用。所以ctx var被加載，但由於某種原因，它給了我錯誤。

我已經包含下面的文件。預先感謝您的幫助。

編輯：我只是試圖從每個單獨的JS文件中取出所有的代碼，並將它們放入相同的順序，他們的意圖是在現在，它現在正常工作。但很高興知道爲什麼它根本不起作用。因爲它將變得非常忙碌，我的所有代碼都放在1個文件中。謝謝。

的index.php

<!doctype> 
<html> 
<head> 
    <title>Game - Unknown</title> 
    <link rel="stylesheet" href="./assets/css/default.css"> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.3.min.js"></script> 
    <!--<script src="./assets/js/loader.js"></script>--> 
    <script src="./assets/js/common.js"></script> 
    <script src="./assets/js/graphics.js"></script> 
    <script src="./assets/js/game.js"></script> 
</head> 
<body> 
<canvas id="viewport"></canvas> 
</body> 
</html>

common.js

$(document).ready(function(){ 

     // Setup the canvas game context for 2D 
     var canvas = document.getElementById("viewport"); 
     var ctx = canvas.getContext("2d"); 

     // Update the canvas dimensions to match window size when changed 
     $(window).resize(function(){canvasResize()}); canvasResize(); 

     function canvasResize(){ 
     var cWidth = window.innerWidth; 
     var cHeight = window.innerHeight; 

     canvas.width = cWidth; 
     canvas.height = cHeight; 

     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     ctx.fillStyle = '#000'; 
     ctx.fillRect(0, 0, cWidth, cHeight); 
     } 

     // Get center of things - Useful for centering images on canvas 
     function getCenter(dim){ return dim/2 } 

    });

graphics.js

$(document).ready(function(){ 

     function gfxTile(x, y, w, h, r, g, b, a) 
     { 
     ctx.fillStyle = "rgb(60, 60, 100)"; 
     ctx.beginPath(); 
     //ctx.moveTo(x + h/2, y + w/2); 
     ctx.moveTo(10, 10); 
     ctx.lineTo(105, 25); 
     ctx.lineTo(25, 105); 
     ctx.lineTo(25, 105); 
     ctx.closePath(); 
     ctx.fill(); 
     } 

    });

game.js

$(document).ready(function(){ 

     // START TEMPORARY 
     var mapSizeX = 10; 
     var mapSizeY = 10; 
     var mapArray = new Array(); 

     function createMap() 
     { 
     for(x = 0; x < mapSizeX; x++) 
     { 
      mapArray[x] = []; 

      for(y = 0; y < mapSizeY; y++) 
      { 
       mapArray[x][y] = 0; 
      } 
     } 
     } 
     // END TEMPORARY 

     setInterval(mainLoop, 50); 

     function mainLoop() 
     { 
     //gfxTile(10, 10, 40, 40, 50, 50, 50, 100); 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     } 

    });

來源

2013-03-24 Brad Bird

var ctx = canvas.getContext("2d");創造了你傳入$(document).ready();

功能的範圍稱爲ctx變量當game.js的內部函數執行，沒有在其範圍內沒有ctx變量，或父範圍window。

一個簡單的辦法將改變

var ctx = canvas.getContext("2d");

到

window.ctx = canvas.getContext("2d");

來源

2013-03-24 21:06:35 Stephen

哦，我明白了！我不知道$（document）.ready（）有一個局部範圍，並且認爲裏面的所有內容都是全局的。謝謝。 – 2013-03-24 21:08:18

你CTX變量已經在一個可達的命名空間，你的問題基本上是沒有順序和優先級加載文件的結果。但是，您可以使用腳本加載器來解決問題，並確保在使用變量之前已經定義了變量。

在這個例子中，我使用的是head.js腳本加載器。

<script src="js/head.js"></script> 
<script> 
head.js(
"http://code.jquery.com/jquery-1.9.1.min.js", 
    "http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.3.min.js", 
    "js/common.js", 
    "js/graphics.js", 
    "js/game.js" 
);

你甚至可以使用更向requireJS只露出你想要的名稱空間優化你的代碼。去看一下。

來源

2013-03-24 21:57:16 Ignacio

未捕獲ReferenceError：ctx未定義

回答

相關問題