Question

我有一个脚本，一直告诉我ctx是未定义的，但是在同一个地方制作的脚本中仍然设置了一个不同的变量...所以我很困惑为什么设置一个变量而不是另一个变量。

错误是：未捕获的ReferenceError：第32行未定义ctx（我注释第32行）

然而var canvas被定义为= /

这是我的剧本：

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

当您在init函数中定义ctx时，ctx将对该函数是私有的，因此在第32行不可用。执行在ctx停止，因为它不是'在gameupdate()内可用，因此您不会收到有关canvas的错误（还有！）。如果通过在init-function之外声明它来使ctx可用于所有函数，那么你的错误将转移到canvas-variable（因为它也是init-function的私有），说明canvas没有宣布。

要使变量可用于所有函数，请在函数外部执行脚本顶部的声明。然后从init-function中删除var关键字，只需改为分配变量：

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 2

所有关于范围的变量，变量只存在于它定义的代码块中。将您的定义移到代码顶部。

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 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");
}

未定义的ctx变量

3 个答案: