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

Ankith Reddy

更新於： 2020 年 1 月 24 日

1K+ 次瀏覽

開啟你的 職業生涯

完成課程，獲得認證

開始學習