Question

我已经尝试了一切来解决这个问题并且没有工作。在这里发帖是我的最后一招。

我正在尝试编写一个简单的canvas元素并动态加载所有内容，但没有任何工作。我一直在game.js：33上的Google控制台“Uncaught ReferenceError：ctx is not defined”中收到错误。

我原本以为是因为在其他2个javascript文件之后加载了common.js所以我制作了一个加载文件，按我想要的顺序加载每个JS文件。我使用$ .getScript（）和$ .when（）函数完成了这项工作。不幸的是，这不起作用。所以ctx var正在加载，但由于某种原因它给了我错误。

我已经包含了以下文件。提前感谢您的帮助。

编辑：我只是尝试从每个单独的JS文件中取出所有代码，并按照它们原来的顺序将它们放在同一个文件中，现在它可以正常工作。但是知道为什么它根本不工作会很好。因为它将我的所有代码放在1个文件中变得非常繁忙。谢谢。

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

   });

Answer 1

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

当game.js内部的函数执行时，其范围内没有ctx变量，或者父范围window。

一个简单的解决方案就是改变

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

到

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

Answer 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进一步优化代码，以仅公开所需的命名空间。检查一下。

未捕获的ReferenceError：未定义ctx

2 个答案: