Canvas图像缩放平移需维护scale、offsetX、offsetY三变量，用setTransform重置后scale+translate设置变换，拖拽时offset+=dxdyscale，缩放锚点通过反推imgX/imgY动态调整offset，边界用Math.max/min约束。
Canvas 图像缩放与平移的核心在于正确操作变换矩阵，关键不是反复重绘原始图像，而是维护一个统一的变换状态（缩放倍数、偏移坐标），再结合 ctx.setTransform() 或 ctx.transform() 精确控制绘制行为。
用 setTransform 统一管理变换状态
避免叠加误差的最佳实践是每次重绘前重置并重新设置完整变换。需维护三个变量：scale（当前缩放值）、offsetX、offsetY（相对于画布左上角的平移量）。
- 先调用
ctx.setTransform(1, 0, 0, 1, 0, 0)清除所有历史变换 - 再用
ctx.scale(scale, scale)和ctx.translate(offsetX / scale, offsetY / scale)设置新状态（注意：平移需反向缩放补偿，否则拖动会随缩放变快/慢） - 最后绘制图像时，直接按原始尺寸画在 (0, 0)，由变换自动完成缩放和平移
鼠标拖拽实现平移的坐标转换
用户拖动画布时，实际要改变的是 offsetX 和 offsetY，但鼠标移动像素不能直接赋值——必须换算成“图像坐标系下的位移”。
- 监听
mousedown记录起始鼠标位置startX、startY - 在
mousemove中计算位移差dx = currentX - startX、dy = currentY - startY - 更新偏移量：
offsetX += dx * scale、offsetY += dy * scale（乘以 scale 是因为当前缩放下，1px 鼠标移动对应图像上 scale px 的位移） - 拖拽结束时更新起始记录，保证连续性
双击/滚轮实现缩放的锚点处理
缩放时若不指定中心点，图像会向左上角“坍缩”。理想效果是“以鼠标位置为缩放中心”，这需要动态调整偏移量。
立即学习“前端免费学习笔记（深入）”；
- 获取鼠标在 canvas 中的坐标
clientX/clientY，转为相对于 canvas 左上角的x、y - 计算该点在图像坐标系中的原始位置：
imgX = (x - offsetX) / scale、imgY = (y - offsetY) / scale - 更新 scale（如滚轮向上则
scale *= 1.2） - 反推新偏移：
offsetX = x - imgX * scale、offsetY = y - imgY * scale，确保原鼠标位置仍对应同一图像像素
图像边界限制与居中初始化
缩放平移后常出现图像空白或超出画布，需约束偏移范围，并支持双击恢复初始视图。
- 初始化时计算：若图像比 canvas 小，设
scale = 1并居中：offsetX = (canvas.width - img.width) / 2、offsetY = (canvas.height - img.height) / 2 - 若图像大，设
scale = Math.min(canvas.width / img.width, canvas.height / img.height)，同样居中 - 每次更新
offsetX、offsetY后，用Math.max/Math.min限制其范围，例如：
offsetX = Math.max(-img.width * scale + canvas.width, Math.min(0, offsetX));
（保证图像右边缘不早于 canvas 左边缘，左边缘不晚于 canvas 右边缘）
