javascript 未捕获的 ReferenceError：ctx 未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15603960/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught ReferenceError: ctx is not defined
提问by Brad Bird
I've tried everything to solve this problem and nothings working. Posting here is my last resort.
我已经尝试了一切来解决这个问题，但没有任何效果。在这里发帖是我最后的手段。
I'm trying to code a simple canvas element and load everything dynamically and nothing is working. I keep getting the error in Google console "Uncaught ReferenceError: ctx is not defined" on game.js:33.
我正在尝试编写一个简单的画布元素并动态加载所有内容，但没有任何效果。我在 game.js:33 上的 Google 控制台中不断收到错误“Uncaught ReferenceError: ctx is not defined”。
I originally thought it was because common.js is being loaded after the other 2 javascript files so I made a loader file which loads each JS file in the order I want. I did this using $.getScript() and the $.when() function . Unfortunately, this did not work. So the ctx var is being loaded but it's giving me the error for some reason.
我最初认为这是因为 common.js 是在其他 2 个 javascript 文件之后加载的，所以我制作了一个加载器文件，它按照我想要的顺序加载每个 JS 文件。我使用 $.getScript() 和 $.when() 函数做到了这一点。不幸的是，这不起作用。所以 ctx var 正在加载，但由于某种原因它给了我错误。
I've included the files below. Thanks in advance for any help.
我已经包含了下面的文件。在此先感谢您的帮助。
EDIT: I just tried taking all the code out of each individual JS file and putting them in the same one in the order they are meant to be in and it works fine now. But it would be nice to know why it was not working at all. As it's going to get very hectic having all my code in 1 file. Thank you.
编辑：我只是尝试从每个单独的 JS 文件中取出所有代码，并按照它们的顺序将它们放在同一个文件中，现在它工作正常。但是很高兴知道为什么它根本不起作用。因为将我的所有代码都放在 1 个文件中会变得非常忙碌。谢谢你。
index.php
索引.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
常见的.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
图形.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
游戏.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);
}
});
采纳答案by Stephen
var ctx = canvas.getContext("2d");created a variable called ctxin the scope of the function you passed into $(document).ready();
var ctx = canvas.getContext("2d");创建了一个ctx在您传入的函数范围内调用的变量$(document).ready();
When the function inside of game.js executes, there is no ctxvariable in its scope, or the parent scope, window.
当 game.js 中的函数执行时，ctx其作用域或父作用域中没有变量window。
An easy fix would be changing
一个简单的解决办法是改变
var ctx = canvas.getContext("2d");
to
到
window.ctx = canvas.getContext("2d");
回答by Ignacio
Your ctx variable is already on a reachable namespace, your problem is basically a result of loading files with no order and priority. You can however use a script loader to solve the problem and make sure your variable is already defined before using it.
您的 ctx 变量已经在一个可访问的命名空间中，您的问题基本上是由于加载文件没有顺序和优先级。但是，您可以使用脚本加载器来解决问题，并确保您的变量在使用之前已经定义。
In this example I'm using the head.jsscript loader.
在这个例子中，我使用了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"
);
You can optimize your code even more using requireJSto expose only the namespaces you want . Check them out.
您可以使用requireJS进一步优化您的代码，以仅公开您想要的命名空间。去看一下。
