HTML5 Canvas：如何绘制缩放时正确转换的恒定大小的图像？

Question

我想创建一个画布来绘制背景图像，但也允许缩放和拖动。我遇到了这个 stackoverflow 答案Zoom Canvas to Mouse Cursor。它是完美的，除了一件事，由于画布比例因子，它会缩放它绘制的每张图像。

我需要在图像上绘制一些放大时不会缩放的标记，有点像谷歌地图上的那些红色箭头。 因此，我尝试通过缩放因子的倒数来缩放图像的大小，使其大小恒定并且可以正常工作，但当然它不会停留在图像上的特定位置。为什么会发生这种情况，我应该如何解决？

Answer 1

在彼此上绘制 2 个画布。上面的画布（具有较高的 zindex）将用于绘制标记。较低的画布（具有较低的 zindex）将用于绘制图像。您应该执行所有操作（缩放和平移）在下部画布上下文中保持上部不变。