縮放后如何重置HTML5 canvas？

Question

我正在嘗試創建一個基於 HTML5 畫布的 web 應用程序，它具有縮放到光標功能。 這個想法很簡單：

• 用戶通過標准 HTML 輸入加載圖像；
• 圖像以 canvas 為中心；
• 用戶可以將圖像放大/縮小到 cursor 位置；
• 當用戶加載另一個圖像時，canvas 被清除並重置；

我在最后一步遇到了麻煩。 當我加載第一張圖片，放大/縮小然后加載第二張圖片時，我得到的第二張圖片已經縮放到前一張圖片的比例。 我想問題出在trackTransforms function（那里拿走了），但我不明白它是如何工作的，所以我無法找到問題所在。

直播碼： https://jsfiddle.net/Arkonage/tgkv21s8/22/

Answer 1

作為一個快速而骯臟的解決方案：

• 添加ctx.save(); 到trackTransforms() function 定義的開頭。
• 添加ctx.restore(); ctx.save(); ctx.restore(); ctx.save(); 到resetCanvas() function 定義的開頭。