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

Question

I am adding a canvas to the DOM, and then using CreateJS to build a game. I am initialising a CreateJS ticker, and adding animations and graphics. Everything works fine, but only once. If I remove the canvas and the game code, I can't add it again later on - the canvas just doesn't show anything anymore.

My question: how do I properly clear all CreateJS functions from memory, and start anew with a new canvas? It seems that CreateJS keeps holding on to old listeners and elements, even though I removed everything.

This is my code:

// 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

If you are changing canvases, or resetting the stage, make sure to remove the DOM events from the stage. From the docs:

---

enableDomEvents(Boolean enable)

Enables or disables the event listeners that stage adds to DOM elements (window, document and canvas). It is good practice to disable events when disposing of a Stage instance, otherwise the stage will continue to receive events from the page.

When changing the canvas property you must disable the events on the old canvas, and enable events on the new canvas or mouse events will not work as expected. For example:

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

---

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

I am not sure if this will solve your problem, but it could help.

Answer 2

i recommend you to use this

//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();
}