Javascript 缩放后在画布上绘制

我正在开发一个HTML5应用程序，它可以在画布上呈现形状。形状由用户使用自由绘图绘制

由于以下回答，我实现了缩放：

---

但是，一旦画布被缩放，当用户继续绘制时，线将以偏移显示。问题是如何转换点，以便再次在光标下绘制线？

当您从

元素获取鼠标坐标时，就DOM而言，它们与元素的高度和宽度相关。它们不会根据您缩放画布上下文的方式而改变。为了获得光标下画布的坐标，必须对其进行变换以匹配画布的当前变换

// mouse event coordinates
var mouseX;
var mouseY;

// current canvas transforms
var originX;
var originY;
var scale;

// adjust mouse coordinates with canvas context's transforms
var canvasX = mouseX / scale + originX;
var canvasY = mouseY / scale + originY;

// should draw a rectangle with the cursor being directly in the center
context.fillRect(canvasX - 10, canvasY - 10, 20, 20);

---

谢谢，我在示例应用程序上试过了，效果很好。请再问一个小问题：在他的例子中，有这样的代码-

context.translate（-（mousex/scale+originx-mousex/（scale*zoom））。我不明白这部分：
-mousex/（缩放）
。这是做什么的？
scale*zoom
是新的比例因子。该示例将鼠标坐标除以此新比例，然后从鼠标坐标除以旧比例中减去鼠标坐标，有效地在
originx
和
originy
中记录原点因比例而改变的大小。非常感谢！