Canvas缩放平移核心是统一维护scale、offsetX、offsetY三变量，重绘时用setTransform统一设置变换；滚轮缩放需锚定光标并逆算偏移；拖拽位移须除以scale换算；截图区域需逆变换映射回原始坐标系。
Canvas 实现缩放与平移，关键不在调用多少次 scale 或 translate，而在于统一维护视口状态，并让所有交互围绕“原始坐标系”展开。鼠标滚轮缩放要锚定光标位置，拖拽移动要按缩放比反向换算位移，否则画面会漂移、跳动或裁剪错位。
用 offset + scale 管理视口状态
不要反复修改画布变换矩阵，而是维护三个独立变量：
- scale：当前缩放倍数（初始为 1）
- offsetX、offsetY：视口左上角在原始图像坐标系中的位置（单位是原始像素，不是屏幕像素）
每次重绘前统一设置坐标系：
ctx.setTransform(scale, 0, 0, scale, offsetX * scale, offsetY * scale);
这样后续所有绘图命令（如 fillRect(x, y, w, h)）都直接使用业务逻辑坐标，无需手动缩放或偏移。
鼠标滚轮缩放必须锚定光标点
用户希望以鼠标所在位置为缩放中心，而不是左上角。实现分三步：
- 把鼠标屏幕坐标
clientX/clientY转成当前原始坐标系下的位置：xInWorld = (clientX - offsetX * scale) / scaleyInWorld = (clientY - offsetY * scale) / scale - 根据新缩放值
newScale，反推新的偏移量，使该世界坐标仍映射到同一屏幕位置：newOffsetX = clientX / newScale - xInWorldnewOffsetY = clientY / newScale - yInWorld
这个过程必须包裹在 save()/restore() 中，避免影响其他绘制逻辑。
拖拽平移要除以缩放比换算位移
鼠标按下时记录 startX/startY，拖动中获取 currentX/currentY，二者差值是屏幕像素位移，需转为原始坐标系偏移：
deltaX = (currentX - startX) / scaledeltaY = (currentY - startY) / scale- 更新：
offsetX += deltaX，offsetY += deltaY
注意对极小缩放值（如 scale ）做保护，防止数值失真或除零错误。
截图区域需逆变换映射回原始图像空间
用户拖出的截图框（如 {x:120, y:80, width:300, height:200}）是当前缩放+偏移后的屏幕坐标。要准确截取原始图像对应区域，需逆向还原：
srcX = (x - offsetX * scale) / scalesrcY = (y - offsetY * scale) / scale-
srcW = width / scale，srcH = height / scale
再用 drawImage(img, srcX, srcY, srcW, srcH, 0, 0, dstW, dstH) 绘制到新 canvas 上导出。
