設置寬度/高度時，在HTML5畫布中禁用重置

我的場景是動態更改了畫布寬度/高度，而我不想重置畫布。相反，我使用clearRect（），因爲我知道矩形必須被清除的邊界。設置寬度/高度時，在HTML5畫布中禁用重置

當寬度/高度再次設置時，有沒有辦法可以禁用畫布的重置？
有沒有辦法保存以前的狀態，只是將其加載回畫布而不重新繪製它？

2011-03-24 Fahad

當您調整大小時，無法防止畫布重置。你將不得不保存它，調整它的大小，然後恢復你保存的內容。 – Gabe 2011-03-24 04:19:34

我認爲這有點奇怪，無論如何，我發現使用GetImageData/PutImageData保存/恢復的方法，這有助於現在。我一直在尋找的是畫布不重繪，除非用戶指定它，這將更多地控制畫布對用戶更改作出反應的方式。 – Fahad 2011-03-24 05:16:52

恐怕沒有辦法來禁用此功能，它內置於畫布規範。

第4.8.11：

當畫布元件被創建，並隨後每當寬度和高度屬性設置（是否爲一個新值，或先前的值）時，位圖和任何相關聯的上下文必須清除回初始狀態，並用新指定的座標空間維度重新初始化。
是，和GetImageData/PutImageData是一種方式，但它可能比通過以下方式要慢得多：

比方說，你的畫布被稱爲realCanvas。製作第二個畫布（我們將其稱爲fakeCanvas），它與您想要的真實畫布一樣大，但只能在JavaScript代碼中製作，並且絕不會將其添加到文檔中（因此沒有人會看到它）。

然後，你調整realCanvas權利之前，無法進行此操作：
```
fakeCanvasContext.drawImage(realCanvas, 0, 0); 
```
這將引起一個整個畫布到另一個，它會從性能的角度發生得很快。

一旦完成調整大小，您可以將fakeCanvas的內容拖回到realCanvas中。
```
realCanvasContext.drawImage(fakeCanvas, 0, 0); 
```
就是這樣！

如果你想獲得的技術，你甚至可以通過更多這樣的第二輪抽籤加快我的方式：
```
realCanvasContext.drawImage(fakeCanvas, 
    0, 0, realCanvas.width, realCanvas.height, 
    0, 0, realCanvas.width, realCanvas.height);` 
```
這樣，你只複製可以容納到realCanvas的部分。請注意，我沒有測試過我寫的代碼，所以可能會有一兩個語法錯誤。

來源

2011-03-24 13:42:58

我嘗試了你的建議，我的場景很不一樣，它不是調整畫布大小。這是一種交易者網格場景，畫布中的更新每250毫秒就有一次，我的確可以獲得大約8-20％CPU使用率的良好性能，與Get/Put鏡像數據幾乎相同。但無論如何，drawImage方法應該可以幫助我在其他情況下。該規範很奇怪，應該有一個應該重置畫布的reset（）方法，通過改變畫布的寬度/高度來增加/減少像素而不是重新初始化它自己。 – Fahad 2011-03-26 07:12:05

設置寬度/高度時，在HTML5畫布中禁用重置

回答

相關問題