admin管理员组文章数量:1320807
I have a script which keeps telling me ctx is undefined but yet a different variable is still set in the script which was made at the same place... so im confused why one variable is set and not the other.
The error is: Uncaught ReferenceError: ctx is not defined on line 32 (i mented line 32)
Yet var canvas is defined =/
This is my script:
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);
}
Hope you can help explain my mistake.
I have a script which keeps telling me ctx is undefined but yet a different variable is still set in the script which was made at the same place... so im confused why one variable is set and not the other.
The error is: Uncaught ReferenceError: ctx is not defined on line 32 (i mented line 32)
Yet var canvas is defined =/
This is my script:
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);
}
Hope you can help explain my mistake.
Share Improve this question asked Feb 25, 2012 at 22:55 SirSir 8,27717 gold badges88 silver badges154 bronze badges3 Answers
Reset to default 2It's all about scope, the variable will only exist in the block of code it is defined. Move your definitions to the top of the code.
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);
}
As you define ctx
within the init-function, ctx
will be private to that function, thus not available at line 32. The execution stops at ctx
, since it isn't available inside gameupdate()
, therefore you don't get an error about canvas
(yet!). If you make ctx
available to all functions by declaring it outside the init-function, your error will move to the canvas-variable (since that is private to init-function as well), stating that canvas
isn't declared.
To make the variables available to all functions, do the declaration at the top of your script, outside the function. Then remove the var
keyword from you init-function and simply assign the variables instead:
var ctx, canvas;
// ... all your functions
function init(){
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
loadimg();
loadTimer = setInterval(loadall,100);
}
For more information on variable scoping in JavaScript, have a look at this MDN article.
I can only guess, but in order for this to work:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
You need to have a
<canvas id="canvas"></canvas>
Element in your html.
Otherwise, getElementById("canvas")
will not return a canvas and canvas.getContext("2d");
will not set the ctx var.
EDIT: also see DJohnson's post regarding the scope of your canvas and ctx variables.
If you omit the var keyword, the scope of a variable will be global. see: Javascript variable scope
In your sample, you have defined it locally using
function init(){
var ctx = canvas.getContext("2d");
}
That is why you cannot access it in another function (and that is also what is different from the reference you posted).
So this would work:
function init(){
ctx = canvas.getContext("2d"); // not var keyword
}
And this would be proper:
var ctx;
function init(){
ctx = canvas.getContext("2d");
}
本文标签: javascriptUndefined ctx variableStack Overflow
版权声明:本文标题:javascript - Undefined ctx variable - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742089856a2420198.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论