如何完全清除CreateJS代码和画布？

Question

我正在向DOM添加一个画布，然后使用CreateJS构建一个游戏。我正在初始化一个CreateJS报价器，并添加动画和图形。一切都很好，但只有一次。如果我删除了画布和游戏代码，以后就不能再添加了-画布不再显示任何内容。

我的问题是:如何正确地从内存中清除所有CreateJS函数，并从新画布重新开始？似乎CreateJS仍然保留着旧的监听器和元素，即使我删除了所有内容。

这是我的代码：

// remove canvas and then restart - this causes buggy behavior
this.removeAndRestart = function() {
    document.getElementById("gamecontainer").innerHTML = '';
    createjs.Ticker.removeAllEventListeners();
    setTimeout(this.showGame, 1000);
}

// simply start the game - this works only the first time
this.showGame = function() {
        document.getElementById("gamecontainer").innerHTML = '<canvas id="gamecanvas" width="900" height="400"></canvas>';
        this.stage = new createjs.Stage("gamecanvas");

        // create the ticker and update the stage
        createjs.Ticker.setFPS(30);
        createjs.Ticker.addEventListener("tick", tickHandler);
}

Answer 1

如果要更改画布或重置舞台，请确保从舞台中删除DOM事件。从文档中：

enableDomEvents(Boolean enable)

启用或禁用stage添加到DOM元素(窗口、文档和画布)的事件侦听器。最好在处置Stage实例时禁用事件，否则stage将继续从页面接收事件。

更改画布属性时，必须禁用旧画布上的事件，并启用新画布上的事件，否则鼠标事件将不会按预期工作。例如：

myStage.enableDOMEvents(false);
myStage.canvas = anotherCanvas;
myStage.enableDOMEvents(true);

http://www.createjs.com/Docs/EaselJS/classes/Stage.html#method_enableDOMEvents

我不确定这是否会解决你的问题，但它可能会有所帮助。

Answer 2

我建议你使用这个

//create listener tick
createjs.Ticker.addEventListener('tick',tick);
//remove listener tick
createjs.Ticker.removeEventListener('tick',tick);
//exemple stopped object moves in Y axe if it exceeds heigth of canvas 
createjs.Ticker.addEventListener('tick',tick);
function tick(){
    console.log( myBitmap.x +" "+myCanvas.width);
    if (myBitmap.y < myCanvas.height){
        myBitmap.y=myBitmap.y+10;
    }else{
        createjs.Ticker.removeEventListener('tick',tick);
    }
    scene.update();
}