我正在嘗試移植20年前寫入HTML5的TclTK程序。使HTML5畫布的行爲像TclTK畫布的縮放/翻譯？
經過數小時的沮喪，我瞭解到當您「縮放」或「翻譯」HTML5的畫布元素時，它僅適用於未來的 圖形，而不是畫布上已有的項目。
這與TclTK相反，其中畫布上已有的項目是 而不是縮放/翻譯。
短創造了戰平/重繪循環（這裏我清除畫布和重繪 所有對象自己，當我要縮放/翻譯），是 反正有使HTML5的畫布元素表現得像TclTK的？
或者我錯過了一些大事？
畫布2D上下文基於像素方式的圖像操作 - 它不是像您所熟悉的「保留模式」圖形界面。從字面上看，它沒有記錄您的圖形重繪。如果你想改變圖形，你必須以某種方式重新繪製它們。
最後一切都在重新繪製（雖然重繪可能隱藏在您的代碼中），但有一些方法可以減少您必須執行的工作量。這裏有一些選擇，大致變化量的順序，你必須做你的代碼（大致質量的提高/性能順序）：
畫在畫布上的圖形，然後擴展和使用CSS屬性翻譯畫布本身（而不是畫布的寬度和高度屬性，這將清除它）。這將重新縮放圖像，可能會損失質量，因爲您沒有爲當前比例重新繪製圖像。
在畫布上繪製圖形，然後將它們導出到ImageData或數據URL中，然後在需要時將其重繪到畫布上。再一次，可能會失去質量。
上述兩個基本上是繼續使用您已經寫好的畫布代碼的雜物。爲了得到一個合適的系統，像你描述的TK爲，你想：
構建自己的場景圖：創建像Circle，Line等代表的圖形對象的集合，而對於那些容器，存儲轉換屬性，如比例和位置。然後編寫例程來遍歷此圖並在需要重繪時執行相應的繪圖命令。
改爲使用SVG。 SVG是一種矢量圖形語言，在現代瀏覽器中，您可以直接嵌入到HTML中，並使用JavaScript操作，就像在頁面的其他部分一樣。在SVG中，您可以簡單地更改比例屬性並獲取您希望看到的更改。
（先前的選項基本上重塑SVG少量。）