将 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);