将 HTML5 画布缩放至鼠标光标

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

translate() 方法重新映射画布上的 (0,0) 位置。scale() 方法用于缩小或放大当前的绘图。如果要按偏移量平移画布的上下文，则需要先按比例缩放以放大或缩小，然后按相反的鼠标偏移量反向平移。

以下示例提供了这些步骤

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

更新于： 2020 年 1 月 24 日

1K+ 次浏览

开启你的 职业生涯

完成课程，获得认证

开始学习
广告