将HTML5画布缩放到鼠标光标

画布始终从其当前原点开始缩放。默认原点为[0,0]。如果要从另一个角度进行缩放,则可以先执行ctx.translate(desiredX,desiredY);。这会将画布的原点重置为[desiredX,desiredY]。

translate()方法重新映射画布上的(0,0)位置。该scale()方法将当前图形放大或缩小。如果要translate()通过偏移量到达画布上下文,则需要先将scale()其放大或缩小,然后再translate()返回与鼠标偏移量相反的位置。

下面的示例中给出了这些步骤

ctx.translate(pt.x,pt.y);
ctx.scale(factor,factor);
ctx.translate(-pt.x,-pt.y);