如何将画布存储到变量中，然后在稍后渲染它？答案

【问题标题】：How to store a canvas into a variable, and then render it at later point?如何将画布存储到变量中，然后在稍后渲染它？
【发布时间】：2019-12-09 19:40:12
【问题描述】：

这个想法是您可以在画布上绘画，然后将其存储到一个变量中并继续其他绘画等。然后，如果您愿意，可以从该变量重新打开之前在画布上绘画。

只有一个画布元素。

这就是我试图解决这个问题但没有结果的方法：

<canvas id="myCanvas" width="500" height="500"></canvas>

canvas: HtmlCanvasElement;
ctx1: any;
storedCanvas: HTMLCanvasElement;
ctx2: any;

ngAfterviewInit(){
  this.canvas = <HTMLCanvasElement>document.getElementById('myCanvas');
  this.ctx = this.canvas.getContext("2d");
}

saveCanvas(){
  this.storedCanvas = this.canvas;
}

loadCanvas(){
this.canvas.replaceWith(this.storedCanvas); 
}

无论我在使用 saveCanvas() 后做了什么，这些更改都会影响 storedCanvas，例如：

1) 绘制

2) 保存

3) 进行一些更改而不保存

4) 加载画布，从 3) 开始的更改也影响了 storedCanvas，这意味着即使保存后 canvas 和 storedCanvas 仍然相同.

我认为这甚至与您应该存储和渲染画布的方式相差甚远。

【问题讨论】：

因为您仍然只创建一个画布...
@ASDFGerte 是否可以将画布值存储到变量中？如果我将多个画布元素放在 HTML 中，这将不是一个很好的解决方案。
看看这里serialize a canvas 注意：这适用于简单的画布。
不要误会。您确实将画布存储到变量中（并且作为所有 javascript 对象，通过引用）。然后你改变画布。无论你是否将它存储在一个变量中都没有关系，它仍然只是一个画布，你可以改变它。如需复制画布，请参阅any-way-to-clone-html5-canvas-element-with-its-content。
@ASDFGerte 啊，我误会了。谢谢你的解释。

标签： javascript html typescript canvas

【解决方案1】：

您在文档中创建了第一个画布，然后像这样获取对它的引用：

this.canvas = <HTMLCanvasElement>document.getElementById('myCanvas');

现在this.canvas 是对您的第一个画布的引用。

然后将相同的引用复制到第二个变量：

this.storedCanvas = this.canvas

所以现在this.storedCanvas 和this.canvas 是同一个画布。

您需要做的是使用以下方法创建第二个画布：

const mySecondCanvas = document.createElement('canvas');
mySecondCanvas.id = "mySecondCanvas";

要查看画布，您需要将其附加到文档正文中：

document.body.appendChild(mySecondCanvas);

阅读有关引用类型与值类型的信息，因为HTMLCanvasElement 是一种引用类型。当您将它分配给第二个变量时，它不会复制整个对象，它只是将引用复制到同一个对象。

【讨论】：