javascript - HTML5 Canvas : How to draw a constant-sized image that translates properly when zooming?

Question

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

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

Answer 1

互相绘制 2 个 Canvas 。上面的 Canvas (zindex 较高)将用于绘制标记。下面的 Canvas (zindex 较低)将用于绘制图像。您应该执行所有操作(缩放和平移)在下部 Canvas 上下文中，保持上部 Canvas 不变。