如何彻底清除 CreateJS 代码和画布？答案

【问题标题】：How to clear CreateJS code and canvas completely?如何彻底清除 CreateJS 代码和画布？
【发布时间】：2023-03-14 20:40:01
【问题描述】：

我正在向 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);
}

【问题讨论】：

您在重新启动游戏时是否在控制台中看到任何错误？你能在jsfiddle.net上举个例子吗？
这听起来可能是 EaselJS 中的一个错误。这是在社区论坛上交叉发布的：community.createjs.com/discussions/easeljs/… -- 我们将对其进行调查，并在那里回答。
我在这里创建了一个小提琴，它没有显示我的所有问题，但你可以看到在重新启动整个画布游戏应用程序后补间没有触发。 jsfiddle.net/BUyyv

标签： javascript canvas easeljs createjs

【解决方案1】：

如果您要更改画布或重置舞台，请确保从舞台上移除 DOM 事件。来自文档：

enableDomEvents（布尔启用）

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

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

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

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

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

【讨论】：

谢谢！我不知道。我将此添加到我的小提琴中，它仍然显示第二次创建画布时没有触发补间。 jsfiddle.net/BUyyv/1
我在别处回答了这个问题。 Tween 的问题在于，当您删除所有侦听器时，它也会清除 TweenJS 的刻度侦听器。您可以使用以下方式重新添加它：createjs.Ticker.addEventListener("tick", createjs.Tween);
谢谢！这解决了我的一个问题。在删除canvas元素并添加一个新元素后，我仍然没有找到如何完全重置easeljs。这很可能是我自己的代码中的一个错误。直到我找出它是什么，我才将我的画架游戏加载到 iframe 中。这样我就可以确定当我卸载 iframe 时它已经完全消失了。

【解决方案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();
}

【讨论】：