Javascript createjs.Bitmap（）图像未显示_Javascript_Html5 Canvas_Easeljs_Createjs

Javascript createjs.Bitmap（）图像未显示

javascript html5-canvas

Javascript createjs.Bitmap（）图像未显示,javascript,html5-canvas,easeljs,createjs,Javascript,Html5 Canvas,Easeljs,Createjs,我真的被这个简单的问题难住了。我四处搜索，找到了“解决”的解决方案，但似乎无法让它们在我这边发挥作用。我正在尝试将按钮图像作为createjs.Bitmap（）对象加载到我的舞台/画布上。我完全按照文档和教程中显示的那样做，似乎无法使图像实际显示在画布上。下面是与此关联的game.js文件： // GLOBAL VARIABLES var gameCanvas; // The canvas the game will be contained within var gam

我真的被这个简单的问题难住了。我四处搜索，找到了“解决”的解决方案，但似乎无法让它们在我这边发挥作用。我正在尝试将按钮图像作为createjs.Bitmap（）对象加载到我的舞台/画布上。我完全按照文档和教程中显示的那样做，似乎无法使图像实际显示在画布上。下面是与此关联的game.js文件：

// GLOBAL VARIABLES
var gameCanvas;             // The canvas the game will be contained within
var gameStage;              // The primary stage holding all of our game elements
var mainMenuContainer;      // The container for the main menu elements

// INITIALIZATION METHODS
// init() - sets up the game gameStage and game elements. This gets called by the <body> onLoad() event
function init() {
    // initialize gameStage to manage all of the game elements
    gameStage = new createjs.Stage("gameCanvas");

    // add a ticker to the gameStage object
    createjs.Ticker.on("tick", gameStage);

    // initialize the main menu for our game
    initMainMenu();

    // update the stage
    gameStage.update();
}

// initMainMenu() - sets up the mainMenuContainer element and attaches all of the main menu game elements to the
// container. This is called from the main init() function when the main menu is ready to be initialized
function initMainMenu() {
    // initialize the container to manage all of the elements to be displayed on the main menu
    mainMenuContainer = new createjs.Container();

    var mainMenuStartBitmap = new createjs.Bitmap("../static/img/gui/mainMenuStartButton.jpg");

    // add all elements of the main menu to the mainMenuContainer
    mainMenuContainer.addChild(
        mainMenuStartBitmap
    );

    // add the mainMenuContainer to the gameStage
    gameStage.addChild(mainMenuContainer);

    // update the stage
    gameStage.update();
}

//全局变量
var gameCanvas；//游戏将包含在画布中
var gameStage；//初级阶段包含我们所有的游戏元素
var mainMenuContainer；//主菜单元素的容器
//初始化方法
//init（）-设置游戏阶段和游戏元素。这将由onLoad（）事件调用
函数init（）{
//初始化gameStage以管理所有游戏元素
gameStage=newcreatejs.Stage（“gameCanvas”）；
//向gameStage对象添加一个ticker
createjs.Ticker.on（“tick”，gameStage）；
//初始化游戏的主菜单
initMainMenu（）；
//更新舞台
gameStage.update（）；
}
//initMainMenu（）-设置mainMenuContainer元素并将所有主菜单元素附加到
//容器。当主菜单准备初始化时，从main init（）函数调用此函数
函数initMainMenu（）{
//初始化容器以管理主菜单上显示的所有元素
mainMenuContainer=new createjs.Container（）；
var mainMenuStartBitmap=new createjs.Bitmap（“../static/img/gui/mainMenuStartButton.jpg”）；
//将主菜单的所有元素添加到mainMenuContainer
mainMenuContainer.addChild(
mainMenuStartBitmap
);
//将mainMenuContainer添加到gameStage
gameStage.addChild（主菜单容器）；
//更新舞台
gameStage.update（）；
}

有人看到我创建位图并将子对象添加到stage/container的方式有什么问题吗？

更新stage时，图像尚未加载

你应该：

不断更新阶段。图像加载后将显示
侦听image.bitmap.onload事件，并在此时再次更新您的阶段
在绘制和更新阶段之前，请正确预加载图像。。您可以使用prelojs来实现这一点

干杯。

对于一个小样本，onload肯定比不必要地更新stage要好。任何更大的，完全预加载可能是最好的。很高兴它起作用了！