縮放 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+ 次

開啟您的 職業生涯

完成課程，獲得認證

開始