保持滑鼠遊標周圍的縮放焦點
在HTML5 中導航影像時，圍繞滑鼠遊標進行縮放（如Google 地圖中所示）可增加直覺的用戶體驗。但計算此移動可能會令人困惑。
方法：
向遊標縮放：
-
翻譯： 將畫布上下文移動遊標偏移。
-
縮放： 依所需係數縮放。
-
反向翻譯： 向後移動遊標偏移的相反值。
計算：
給定影像位置和尺寸，以及相對於畫布中心的遊標座標：
- 將遊標位置轉換為變換後的畫布上下文：dx = (cursorX - canvasCenterX) * 比例； dy = (cursorY - canvasCenterY) * 比例;
- 翻譯：ctx.translate(dx, dy);
- 比例：ctx.translate(dx, dy);
- 比例：ctx. scale(factor, Factor);
反向翻譯：ctx.translate(-dx, -dy);
演示：
訪問提供的演示鏈接：http://phrogz.net/tmp/canvas_zoom_to_cursor.html .
此範例具有拖曳、點選縮放、Shift-點選縮放和滾輪縮放的功能。
注意：
目前 Safari 的縮放速度可能與 Chrome 或 Firefox 不同。
以上是## 如何在 HTML5 Canvas 中實現平滑的縮放到遊標功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
