未捕获的 ReferenceError：未定义 ctx答案

【问题标题】：Uncaught ReferenceError: ctx is not defined未捕获的 ReferenceError：未定义 ctx
【发布时间】：2013-03-24 21:01:20
【问题描述】：

我已经尝试了一切来解决这个问题，但没有任何效果。在这里发帖是我最后的手段。

我正在尝试编写一个简单的画布元素并动态加载所有内容，但没有任何效果。我在 game.js:33 上的 Google 控制台“未捕获的 ReferenceError：ctx 未定义”中不断收到错误消息。

我最初认为这是因为 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 }

   });

graphics.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);
      }

   });

【问题讨论】：

标签： javascript jquery html canvas

【解决方案1】：

var ctx = canvas.getContext("2d"); 在您传递给$(document).ready(); 的函数范围内创建了一个名为ctx 的变量

game.js 内部的函数执行时，其作用域或父作用域window 中没有ctx 变量。

一个简单的解决方法是改变

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

到

window.ctx = canvas.getContext("2d");

【讨论】：

哦，我明白了！我不知道 $(document).ready() 有一个本地范围，并认为在其中但在函数之外的所有内容都将充当全局。谢谢。

【解决方案2】：

您的 ctx 变量已经在可访问的命名空间中，您的问题基本上是加载文件没有顺序和优先级的结果。但是，您可以使用脚本加载器来解决问题，并确保您的变量在使用之前已经定义。

在本例中，我使用的是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"
);

您可以使用requireJS 进一步优化您的代码，只公开您想要的命名空间。看看他们。

【讨论】：