如何將畫布存儲到變量中，然后在稍后渲染它？

Question

這個想法是你可以在畫布上繪畫，然后將它存儲到一個變量中，然后繼續其他繪畫，等等。然后，如果你願意，可以從變量重新打開以前在畫布上繪畫。

只有一個畫布元素。

這就是我試圖在沒有結果的情況下解決這個問題的方法：

<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仍然相同。

我認為這與您應該如何存儲和渲染畫布並不接近。

Answer 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是一種引用類型。 當您將它分配給第二個變量時，它不會復制整個對象，它只會復制對同一對象的引用。