Javascript 缩放后如何重置HTML5画布？

我正在尝试创建一个基于HTML5画布的web应用程序，它具有缩放光标的功能。 想法很简单：

• 用户通过标准HTML输入加载图像
• 图像在画布上居中
• 用户可以将图像放大/缩小到光标位置
• 当用户加载另一个图像时，画布被清除并重置

我在最后一步上遇到了麻烦。当我加载第一个图像时，放大/缩小然后加载第二个图像，我得到的第二个图像已经缩放到前一个图像的比例。我想问题来自于

trackTransforms

函数（接受它），但我不理解它是如何工作的，所以我无法跟踪问题

实时代码：

---

作为一种快速而肮脏的解决方案：

• 添加

  ctx.save（）

  到

  trackTransforms（）

  函数定义的开头
• 添加

  ctx.restore（）；ctx.save（）到函数定义的开头

---

您有一个

resetCanvas

功能。在

handleImage

函数的开头添加对它的调用。此函数清除画布（即删除以前的图像），但不会恢复其状态。啊，我明白了

ctx.save（）

和

ctx.restore（）

已被覆盖，但似乎仍在工作。设置后立即调用

ctx.save（）

，然后调用

ctx.restore（）；ctx.save（）

在

resetCanvas

的开头@Ouroborus嘿，它工作了！非常感谢。我知道这个古怪的

trackTransforms

函数有问题。你介意把它贴出来作为答复吗？