个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
36
4
我已经尝试了所有方法来解决这个问题，但没有任何效果。在这里发帖是我最后的选择。
我正在尝试编写一个简单的 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/
36
4
0
描述：。在我的Vue 3和nuxt 3项目中，我使用VITEST进行测试。但我在运行测试时遇到了一个问题：。版本。以下是我的页面代码：。下面是我的测试myest.spec.ts：。以下是我的vites
你好吗？我正在研究带有 Ionic 3 教程的 Google map 。我已经完成了那里解释的一切，但是当项目启动时，出现了这个错误。我调查了很多，但没有任何效果。谢谢! Error: Uncaugh
我刚刚开始使用 Node.js 并尝试使用模块。我已经安装了 Node 和 npm，并确保一切顺利。我将在下面添加代码来向您展示我得到了什么。 我有两个 js 文件，它们在这里。 app.js: va
我是 Angularjs 的初学者，在理解模块和作用域方面有些困难。 我不断收到范围未定义的错误，但我不明白为什么。首先，我将 Controller 链接到我设置路由的位置，但是由于在单击提交按钮时调
我正在制作一个 HTML 模板引擎。 程序遍历 HTML，并找到 {{ }} 的所有实例。然后它会遍历计数器中的所有键，并用对 Controller 的引用替换变量名称的实例。 例如，如果我的 Con
在我的 React Native 应用程序中，我有一个 ProductScreen，其中导入两个文件来完成屏幕。 文件 1 (Products.js) 是我的产品列表 文件 2 (Data.js) 是
我有以下类(class): class ScheduledContent { constructor(knex) { this.knex = knex } ge
在以下代码中，obj.sayhello() 行意味着sayhello在 obj 的上下文/范围内执行。 str未在 var 中定义(通过 sayhello )方法。 JS 将在范围内查找变量，即在
我正在尝试使用字符串作为函数的一部分。 const import1 = require('./import1'); const import2 = require('./import2'); //on
var g = { lang: "ttt", l: function(){ console.log(lang); } } console.log(g.l());
$(document).ready(function(){ $('#name').val('Name1'); }); function clickMe(){ console.lo
我刚刚完成了 Meteor 包的开发。现在我想通过将它添加到新的 Meteor 应用程序来测试它: my_cool_package_name/package.js Package.on_use(fun
我在给定的 SSCCE 代码中收到以下错误: Error: ReferenceError: electron is not defined Source File: http://localhost/
我正在关注一个简单的 tut，它有望构建一个响应式 slider ，但是它一直告诉我控制台中有一个错误指向一个名为 advance() 的函数 这是 slider 的简单 html:
我正在尝试使用基于按钮点击的表格中的数据填充表格。我正在将数据传递到 javascript 函数中。 )" id="modifyEdu" class="btn btn-primary"
我需要能够检查一个变量是否存在(如果它没有分配给 {})而不在 javascript 中抛出错误。当我尝试这段代码时 if (a) {} 它抛出 Uncaught ReferenceError
我在设置中有一个 mochajs 测试文件和一个 javascript 代码文件，如下所示: /js/module/codefile.js /js/test/testfile.js codefile.
我正在尝试构建一个简单的 Bookmarklet，它将一些外部 Javascript 加载到页面中，目标是将像 Stackoverflow 那样的 Markdown 编辑器添加到另一个站点。我可以使用
我有一个基于 Django 的网络应用程序。我用 Scrapy Crawler抓取网页。目前，我的目标是能够使用 jQuery 和 AJAX 请求从网页内控制爬虫。 我的理论设置如下: 在网页上，我有
以下 JavaScript... if (eval('typeof admin_post_css_theme_dark-moon)=='function')) {/**/} ...触发以下错误消息..
我是一名优秀的程序员,十分优秀！