Javascript 使用现有画布而不丢失pIxi.js中的内容

我对Pixi.js很陌生，所以很抱歉这是一个愚蠢的问题

我明白，如果我想将pixi.js渲染到现有画布，我必须指定

视图

const app = new PIXI.Application({
    view: myExistingCanvas,
});

然而，我意识到，如果我这样写，Pixi应用程序实际上会覆盖我现有的画布，我最终会丢失“myExistingCanvas”中的所有内容

---

有人能告诉我如何在现有画布上创建一个pixi应用程序而不进行覆盖吗？

使用您可以传递给新的

pixi.application

的构造函数的视图属性，我们可以告诉它使用现有画布。不过，这个画布不一定要添加到DOM中——如果它“虚拟”存在就足够了

因此，最终我们需要三个画布实例——它们都应该具有相同的维度

• 第一个画布是您在问题中提到的现有画布，充当屏幕外画布
• 第二个画布是另一个空的屏幕外画布，用于捕获Pixi的输出
• 第三个画布实际上是屏幕上的画布，它结合了前两个画布的输出

现在你可能想知道怎么做

要做到这一点，我们必须拦截Pixi的更新循环，我们可以通过向

Pixi.ticker.shared

添加一个ticker来实现

在这个更新循环中，我们需要做以下事情：

• 更新Pixi的动画并调用其渲染器
• 清除第三个（屏幕上）画布
• 将第一个画布的内容绘制到第三个画布
• 将第二个画布的内容绘制到第三个画布

基本上就是这样，尽管听起来有点抽象

下面是一个示例（只需单击“运行代码片段”）：

let offScreenCanvasA=document.createElement（“画布”）；
let offScreenCanvasB=document.createElement（“画布”）；
让onScreenCanvas=document.createElement（“画布”）；
宽度=400；
设高度=300；
offScreenCanvasA.width=宽度；
offScreenCanvasB.width=宽度；
onScreenCanvas.width=宽度；
offScreenCanvasA.height=高度；
offScreenCanvasB.height=高度；
onScreenCanvas.height=高度；
文件.正文.附件（在Creencanvas上）；
const app=新的PIXI.Application({
视图：offScreenCanvasB，
透明：是的，
宽度：400，
身高：300
});
const container=new PIXI.container（）；
const renderer=PIXI.autodetectedrenderer（）；
app.stage.addChild（容器）；
const texture=PIXI.texture.from（'https://picsum.photos/id/237/26/37');
for（设i=0；i<25；i++）{
const bunny=新的PIXI.Sprite（纹理）；
兔子。锚。设置（0.5）；
bunny.x=（i%5）*40；
兔y=数学地板（i/5）*40；
容器。addChild（bunny）；
}
container.x=app.screen.width/2；
container.y=app.screen.height/2；
container.pivot.x=container.width/2；
container.pivot.y=container.height/2；
让ticker=PIXI.ticker.shared
股票代码添加（功能（增量）{
容器旋转-=0.01；
render.render（容器）；
onScreenCanvas.getContext（“2d”）.clearRect（0，0，宽度，高度）；
onScreenCanvas.getContext（“2d”）.drawImage（Offscreencanvas，0，0，宽度，高度）；
onScreenCanvas.getContext（“2d”）.drawImage（offScreenCanvasB，0，0，宽度，高度）；
});
让图像=新图像（）；
image.onload=函数（e）{
offScreenCanvasA.getContext（“2d”）.drawImage（例如，目标、0、0、宽度、高度）；
}
image.src=”https://picsum.photos/id/237/400/300";
您可能可以让Pixi绘制屏幕外画布，并将其输出和另一个画布合并到第三个屏幕上画布。@谢谢您的回复。你能告诉我更多关于“合并输出”的观点吗？我不完全确定如何在pixi.js中实现它。