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) / scale
yInWorld = (clientY - offsetY * scale) / scale
• 根据新缩放值 newScale，反推新的偏移量，使该世界坐标仍映射到同一屏幕位置：
  newOffsetX = clientX / newScale - xInWorld
newOffsetY = clientY / newScale - yInWorld

这个过程必须包裹在 save()/restore() 中，避免影响其他绘制逻辑。

Markdown Canvas

将Markdown文件转换为美观的HTML页面，适用于Canvas或浏览器查看。用于用户请求渲染、可视化、显示或分享Markdown文件时。

下载

拖拽平移要除以缩放比换算位移

鼠标按下时记录 startX/startY，拖动中获取 currentX/currentY，二者差值是屏幕像素位移，需转为原始坐标系偏移：

• deltaX = (currentX - startX) / scale
• deltaY = (currentY - startY) / scale
• 更新：offsetX += deltaX，offsetY += deltaY

注意对极小缩放值（如 scale ）做保护，防止数值失真或除零错误。

截图区域需逆变换映射回原始图像空间

用户拖出的截图框（如 {x:120, y:80, width:300, height:200}）是当前缩放+偏移后的屏幕坐标。要准确截取原始图像对应区域，需逆向还原：

• srcX = (x - offsetX * scale) / scale
• srcY = (y - offsetY * scale) / scale
• srcW = width / scale，srcH = height / scale

再用 drawImage(img, srcX, srcY, srcW, srcH, 0, 0, dstW, dstH) 绘制到新 canvas 上导出。