将 HTML5 画布缩放至鼠标光标

htmljavascriptprogramming scripts

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

translate() 方法重新映射画布上的 (0,0) 位置。scale() 方法缩放当前绘图,放大或缩小。如果要按偏移量对画布上下文进行 Translation(),则需要先按 scale() 将其放大或缩小,然后按鼠标偏移量的相反方向对画布上下文进行 Translation()。

以下示例给出了这些步骤

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

相关文章