使用requirejs结构时不显示画布中的画布答案

【问题标题】：canvas in canvas not displayed when requirejs structure used使用requirejs结构时不显示画布中的画布
【发布时间】：2013-09-20 02:48:31
【问题描述】：

我有一个问题让我发疯。

我有一些东西可以在一个 javascript 文件中完美运行，但在与 requirejs 一起使用时完全失败。

(function(){
define([], function (){
    var Sprite = function(){
        return {
            spritesheet:    null,
            canvas:         null,
            context:        null,

            init: function(src, ctx){
                this.canvas = document.createElement('canvas');
                this.context = this.canvas.getContext('2d');
                this.context.drawImage(src, 0, 0, 10, 20, 0, 0, 10, 20);
                ctx.drawImage(this.canvas, 100, 100);
            }
        };
};

return Sprite;
});
}
)();

在我的其他文件中：

(function(){
define(["r", "sprite", "player"], function (Ra, Sprite, Player){
    var Game = function()
    {
        return {
            ...SOME STUFF HERE...
            canvas: null,
            context: null,

            something: function() {
                this.canvas = document.getElementById("game");
                this.canvas.width = 500;
                this.canvas.height = 500;
                this.context = this.canvas.getContext("2d");

                var sprite = new Sprite();
                sprite.init("image.gif", this.context);
         };
     };

     return Game;
});
}
)();

我尽量压缩代码，我希望我没有删减任何重要的东西，但这基本上是不工作的部分。我对 requirejs 也很陌生，所以如果我做错了什么，请告诉我。

无论我做什么，一切似乎都很好，两个画布都已创建，都具有正确的属性，但我放在第一个画布上的第二个画布没有显示。如果我将纯图像而不是画布放置它就可以正常工作，但画布上的画布却不行。

这让我发疯，我尝试了很多可能性，代码在没有所有 requirejs 的情况下工作得很好，但是当我以这种方式构建它时失败了。它与全局范围有关吗？如何使这项工作？我需要画布里面的画布。

感谢您的宝贵时间！

编辑：

我的 html 文件中仅加载了 <script data-main="main" src="libs/require/require.js"></script>，正文中仅加载了 <canvas id="game"></canvas>。

然后在 main.js 我有：

require.config({ 
baseUrl: "./modules",
waitSeconds: 10,
packages: [
    {
        name: "something not used yet",
        location: "something not used yet",
        main: "something not used yet"
    }
]
});

require(['game'], function (Game)
{
    var game = new Game();
    game.begin();
});

其余的我已经在开头展示了。

我在 build 文件夹中有 main.html 和 main.js，在 build/modules 文件夹中有所有其他文件。

【问题讨论】：

使用requirejs的时候不需要使用自调用函数(function(){})()。也许我们可以从那里开始
“r”、“sprite”和“player”模块在哪里定义？这些脚本是否被下载，或者您是否在开发者工具中看到 404 错误？
@enr.code 它看起来确实很愚蠢，但我在一个视频教程中看到了这一点，这个人很有说服力，所以我离开了。我现在删除了它，但它并没有解决问题。
@Jacob 我没有看到 404 错误，这些模块在它们自己的文件中，但它们还没有真正用于游戏中。
这些文件看起来对我有用。您能否发布一下您如何加载 RequireJS 以及您网站的文件结构是什么样的？

标签： javascript html canvas requirejs drawimage

【解决方案1】：

问题是有史以来最荒谬的事情，我浪费了很多时间来弄清楚这么明显的事情......

由于某种原因，我完全忘记等待图像加载并在加载之前继续使用它，而且使用 requirejs 时复杂的（至少对我而言）结构使得很难查明该错误。

同样没有 requirejs 代码可以工作，因为图像加载速度非常快，即使没有 onload，它也可以在下一个函数启动之前准备好，但是当我切换到 requirejs 时，我猜它要么变慢了，要么它的异步性质造成了问题。

无论如何，通过简单的 onload 处理程序解决。

【讨论】：