我已经尝试了所有方法来解决这个问题，但没有任何效果。在这里发帖是我最后的选择。
我正在尝试编写一个简单的 Canvas 元素并动态加载所有内容，但没有任何效果。我在 game.js:33 上不断在 Google 控制台中收到错误“Uncaught ReferenceError: ctx is not defined”。
我最初认为这是因为 common.js 在其他 2 个 javascript 文件之后加载，所以我制作了一个加载程序文件，它按我想要的顺序加载每个 JS 文件。我使用 $.getScript() 和 $.when() 函数做到了这一点。不幸的是，这没有用。所以正在加载 ctx var 但由于某种原因它给了我错误。
我已经包括了下面的文件。在此先感谢您的帮助。
编辑:我只是尝试从每个单独的 JS 文件中取出所有代码，并按照它们应该在的顺序将它们放在同一个文件中，现在它工作正常。但很高兴知道为什么它根本不起作用。因为将我的所有代码都放在一个文件中会变得非常忙碌。谢谢。
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 }
});
图形.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);
}
});
最佳答案
var ctx = canvas.getContext("2d"); 在您传递给 $(document) 的函数范围内创建了一个名为 ctx 的变量.ready();
当 game.js 中的函数执行时，其作用域或父作用域 window 中没有 ctx 变量。
一个简单的解决办法就是改变
var ctx = canvas.getContext("2d");
到
window.ctx = canvas.getContext("2d");
关于javascript - Uncaught ReferenceError : ctx is not defined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15603960/