Canvas缩放时保持鼠标位置固定需动态调整平移偏移量：先将鼠标坐标转为世界坐标，缩放后再反算新偏移，公式为offsetX += (x - offsetX) * (newScale/scale - 1)，配合setTransform统一应用变换。
Canvas缩放时保持鼠标位置（即滚轮中心点）在视图中固定，关键在于动态调整画布的平移偏移量，而非简单缩放。核心思路是：缩放前，把鼠标坐标映射为当前变换下的“世界坐标”；缩放后，再反向计算需补偿的平移量，使该点在屏幕上的像素位置不变。
理解缩放锚点原理
Canvas本身没有内置“以某点为中心缩放”的API，所有变换（scale、translate）都作用于变换矩阵。默认scale(s)是以画布原点（左上角）为中心缩放。要让鼠标处不位移，就得在缩放前后插入一次“抵消性平移”：
- 记录鼠标相对于Canvas左上角的 clientX/clientY
- 将其转换为当前变换下的“逻辑坐标”（即未缩放/平移前的坐标）
- 缩放后，该逻辑坐标应仍对应同一屏幕位置 → 需重新设置
translate偏移
获取鼠标在画布内的相对坐标
必须用 getBoundingClientRect() 消除滚动、边框、缩放等干扰：
const rect = canvas.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top;
注意：不要直接用 event.offsetX，它在某些浏览器或嵌套布局下不可靠。
计算并应用动态平移补偿
假设当前缩放倍数为 scale，当前平移偏移为 offsetX、offsetY，鼠标在画布坐标系中为 (x, y)：
- 缩放前，该点对应的世界坐标是：
(x - offsetX) / scale和(y - offsetY) / scale - 缩放后新倍数为
scaleNew，要让同一世界坐标仍显示在(x, y)，新偏移应为：newOffsetX = x - (x - offsetX) / scale * scaleNewnewOffsetY = y - (y - offsetY) / scale * scaleNew - 简写即：
offsetX += (x - offsetX) * (scaleNew/scale - 1)（同理 Y）
完整事件处理示例
整合进滚轮事件，注意累积缩放与边界控制：
let scale = 1;
let offsetX = 0;
let offsetY = 0;
const minScale = 0.1;
const maxScale = 5;
<p>canvas.addEventListener('wheel', (e) => {
e.preventDefault();
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;</p><p>// 计算缩放因子（支持Ctrl+滚轮精细缩放）
const delta = e.ctrlKey ? 0.05 : 0.1;
const scaleFactor = e.deltaY </p><p>// 更新偏移：锚定鼠标点
offsetX += (x - offsetX) <em> (newScale / scale - 1);
offsetY += (y - offsetY) </em> (newScale / scale - 1);</p><p>scale = newScale;
});</p><p>function render() {
const ctx = canvas.getContext('2d');
ctx.setTransform(scale, 0, 0, scale, offsetX, offsetY); // 重置并应用全部变换
// … 绘制内容
}</p>
关键点：每次渲染都用 setTransform() 重置矩阵，避免多次 scale/translate 累积误差；平移和缩放统一由三个变量控制，逻辑清晰可维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
