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

Question

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

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

Answer 1

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