未定義的ctx變量

Question

我有一個腳本一直告訴我ctx是未定義的，但仍然在腳本中設置了不同的變量，這是在同一個地方創建的......所以我很困惑爲什麼要設置一個變量而不是其他變量。

錯誤是： 未捕獲的ReferenceError：CTX沒有在線路32上所定義（I註釋行32）

然而變種畫布定義=/

這是我的腳本：

var tiles = Array("1.png","0.png"); 
var loaded = 0; 
var loadTimer; 


function loadimg(){ 
var tileImg = new Array(); 
for(var i=0;i<tiles.length;i++){ 
    tileImg[i] = new Image(); 
    tileImg[i].src = tiles[i]; 
    tileImg[i].onload = function(){ 
     loaded++; 
    } 
    } 
} 

function loadall(){ 
if(loaded == tiles.length){ 
    clearInterval(loadTimer); 
    loadTimer = setInterval(gameUpdate,100); 
} 
} 

function gameUpdate(){ 
ctx.clearRect(0,0,canvas.width,canvas.height); //line 32 
draw(); 
} 

function init(){ 
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
loadimg(); 
loadTimer = setInterval(loadall,100); 
} 

希望你能幫助解釋我的錯誤。

Answer 1

這完全是關於作用域，變量將只存在於它定義的代碼塊中。將您的定義移到代碼的頂部。

var tiles = Array("1.png","0.png"); 
var loaded = 0; 
var loadTimer; 
var ctx; 
var canvas; 

function loadimg(){ 
var tileImg = new Array(); 
for(var i=0;i<tiles.length;i++){ 
    tileImg[i] = new Image(); 
    tileImg[i].src = tiles[i]; 
    tileImg[i].onload = function(){ 
     loaded++; 
    } 
    } 
} 

function loadall(){ 
if(loaded == tiles.length){ 
    clearInterval(loadTimer); 
    loadTimer = setInterval(gameUpdate,100); 
} 
} 

function gameUpdate(){ 
ctx.clearRect(0,0,canvas.width,canvas.height); //line 32 
draw(); 
} 

function init(){ 
canvas = document.getElementById("canvas"); 
ctx = canvas.getContext("2d"); 
loadimg(); 
loadTimer = setInterval(loadall,100); 
} 

Answer 2

當你初始化函數中定義ctx，ctx將是私有的該功能，因此不提供線32停止執行ctx，因爲它是內不可gameupdate()，所以你沒有得到關於canvas（尚未！）的錯誤。如果通過在init函數之外聲明ctx，所有函數都可以使用ctx，那麼您的錯誤將移至canvas變量（因爲它對init函數也是私有的），說明canvas未聲明。

要使變量對所有函數都可用，請在函數外部的腳本頂部執行聲明。然後從你刪除var關鍵字的init功能和簡單的分配變量來代替：

var ctx, canvas; 

// ... all your functions 

function init(){ 
    canvas = document.getElementById("canvas"); 
    ctx = canvas.getContext("2d"); 
    loadimg(); 
    loadTimer = setInterval(loadall,100); 
} 

有關在JavaScript中的變量範圍的更多信息，看看這個MDN article。

Answer 3

我只能猜測，但爲了這個工作：

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

你需要有一個

<canvas id="canvas"></canvas> 

元素在你的HTML。

否則，getElementById("canvas")將不會返回畫布，而canvas.getContext("2d");將不會設置ctx var。

編輯：另請參閱DJohnson的帖子關於您的畫布和ctx變量的範圍。

如果您省略了var關鍵字，則變量的範圍將是全局的。 看到：Javascript variable scope

在你的樣品，你在本地使用

function init(){ 
    var ctx = canvas.getContext("2d"); 
} 

這就是爲什麼你不能在另一個函數訪問它定義它（這也是什麼是從您發佈的參考值不同）。

所以這會工作：

function init(){ 
    ctx = canvas.getContext("2d"); // not var keyword 
} 

，這將是正確的：

var ctx; 

function init(){ 
    ctx = canvas.getContext("2d"); 
}