## 如何在 HTML5 Canvas 中实现平滑的缩放到光标功能？

保持鼠标光标周围的缩放焦点

在 HTML5 中导航图像时，围绕鼠标光标进行缩放（如 Google 地图中所示）可增加直观的用户体验。但计算此移动可能会令人困惑。

方法：

向光标缩放：

• 翻译： 将画布上下文移动光标偏移。
• 缩放： 按所需系数缩放。
• 反向翻译： 向后移动光标偏移的相反值。

计算：

给定图像位置和尺寸，以及相对于画布中心的光标坐标：

• 将光标位置转换为变换后的画布上下文：dx = (cursorX - canvasCenterX) * 比例； dy = (cursorY - canvasCenterY) * 比例;
• 翻译：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中文网其他相关文章！