使用requirejs結構時，不顯示畫布中的畫布

Question

我有一個讓我發瘋的問題。

我有一個在一個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文件夾中有其他所有文件。

Answer 1

問題是有史以來最荒謬的事情，我浪費了很多時間去弄清楚這種明顯的事情……

出於某種原因，我完全忘記等待圖像加載，甚至在圖像加載之前就一直使用它，而使用requirejs時復雜的（至少對我來說）結構很難確定該錯誤。

同樣，在沒有requirejs的情況下，代碼也能正常工作，因為圖像加載速度如此之快，即使沒有onload也可以在下一個函數啟動之前就准備好了，但是當我切換到requirejs時，我猜它要么變慢了，要么是它的異步特性造成了問題。

無論如何，可以通過簡單的onload處理程序解決。