缩放 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);

安基特·雷迪

更新时间： 2020 年 1 月 24 日

已观看 1000+ 次

开启您的 职业生涯

完成课程，获得认证

开始