createjs 删除了画布上的所有现有信息？答案

【问题标题】：createjs removed all existing info on canvas?createjs 删除了画布上的所有现有信息？
【发布时间】：2021-05-22 00:58:27
【问题描述】：

我正在尝试验证无论如何都会发生这种情况，并且无法绕过它。 createjs 使用这种架构对我来说似乎很愚蠢。但我注意到从现有画布元素创建舞台会从画布中删除所有形状、文字等？代码如下：

html:

<canvas id="canvas" width="800" height="400"></canvas>

js:

var canv = document.getElementById("canvas");
var stage = new createjs.Stage(canv);
var ctx = canv.getContext('2d');
ctx.beginPath();
ctx.arc(50,50,10,0,2*Math.PI);
ctx.stroke();
createjs.Ticker.addEventListener("tick", tick);//circle created is overwritten here!!!?! Why createjs!?
//stage.update();
createjs.MotionGuidePlugin.install();

var shape1 = new createjs.Shape();
shape1.graphics.f("#000000").dc(0,0,10);


var path1 = new createjs.Shape();
path1.graphics.beginStroke("#ff0000").mt(0,0).qt(50,100,100,0);

stage.addChild(path1, shape1);

createjs.Tween.get(shape1).to({guide:{ path:[0,0, 50,100, 100,0] }},2000, createjs.Ease.cubicInOut);


function tick(event) {
    stage.update();
}

这是无法绕过的吗？对我来说，createjs 不会只是实际使用未擦除的现有元素，这对我来说似乎很愚蠢。如果不是，那么首先传入一个元素有什么意义，为什么不只是创建一个画布元素并给你ID？无论如何，如果事情是这样，不幸的是，我将不得不去其他地方。很遗憾，因为 createjs 似乎很有用。

【问题讨论】：

标签： javascript createjs

【解决方案1】：

CreateJS 使用保留图形模式，即它存储状态并每次重绘。这是因为画布基本上是一个带有绘图命令的大位图——清除舞台是移除之前状态的唯一方法。

但是好消息！如果您想将 CreateJS 内容与其他内容混合，甚至制作附加绘图效果，有很多方法可以绕过这些限制。

第一个很简单，就是设置autoClear。这将阻止清除，并仅在旧内容上绘制新内容。

stage.autoClear = false;

第二个有点困难，但非常适合您想要将 CreateJS 内容与其他库或效果混合的情况。您基本上可以使用另一个画布作为您包含在 CreateJS 中的位图的源：

// Create a child for CreateJS referencing the other canvas
var bmp = new createjs.Bitmap(otherCanvas);

// Add it at the bottom (or top or wherever) in your new CreateJS canvas
stage.addChildAt(bmp, 0);

这是一种很棒的方法，因为它可以让您将内容放在任何您想要的地方，单独编辑等等。

如果您有其他未涵盖的案例，请告诉我，我可以尝试提出建议！

干杯。

【讨论】：