Canvas实现图像局部放大镜需分离显示层与源数据层：源Canvas预加载高清原图并作为像素容器，预览Canvas负责交互与合成，通过坐标映射、clip裁剪圆形区域、drawImage截取缩放绘制，配合边界钳位和requestAnimationFrame优化性能。
Canvas 实现图像局部放大镜，核心在于分离“显示层”与“源数据层”——用一个 Canvas 显示缩略图或原始尺寸图像（主画布），另一个 Canvas 预加载并完整绘制高清原图（源画布），放大时只从源画布截取、缩放、贴回主画布的指定区域。这种方式避免像素失真、绕过 getImageData 性能瓶颈，也天然支持任意缩放比例和边界裁剪。
源 Canvas 要预先加载完整图像
源 Canvas 不渲染在页面上，仅作为图像数据容器。它需与原始图片等宽高等分辨率，确保每个像素可精确寻址：
- 创建离屏 canvas：
const srcCanvas = document.createElement('canvas')，设srcCanvas.width = img.naturalWidth，srcCanvas.height = img.naturalHeight - 用
srcCtx.drawImage(img, 0, 0)一次性绘制整图，后续所有放大操作都从此 canvas 读取像素 - 不依赖
getImageData()，直接用drawImage(srcCanvas, sx, sy, sw, sh, dx, dy, dw, dh)截取+缩放+绘制，性能更优
预览 Canvas 负责交互与合成
用户看到的是这个 Canvas，它通常按容器尺寸缩放显示原图（如 800×600 区域展示一张 4000×3000 图），所有鼠标坐标需按比例映射到源图空间：
- 计算缩放比：
const scaleX = img.naturalWidth / previewCanvas.width，const scaleY = img.naturalHeight / previewCanvas.height - 鼠标位置
(x, y)对应源图坐标：sx = x * scaleX，sy = y * scaleY - 放大区域宽高由镜片直径和倍率决定：例如镜片半径 60px、放大 3 倍，则源截取宽高为
120 / 3 = 40px，即sw = sh = 40
圆形放大镜的关键绘制流程
要在预览 Canvas 上呈现“挖空+填充”的真实镜面效果，需严格控制绘制顺序和上下文状态：
- 先
ctx.save()保存当前绘图状态 - 用
ctx.beginPath()+ctx.arc(x, y, radius, 0, Math.PI * 2)定义圆形路径，再调用ctx.clip() - 执行
ctx.drawImage(srcCanvas, sx, sy, sw, sh, dx, dy, dw, dh)—— 此时只在圆形区域内绘制放大内容 - 立刻
ctx.restore()恢复裁剪前状态，防止影响后续绘制（比如边框、阴影） - 可选：用
ctx.shadowBlur和ctx.strokeStyle给镜片边缘加柔和描边，增强视觉反馈
边界处理与性能优化要点
用户快速移动鼠标时，容易导致 sx、sy 超出源图范围，或重复绘制引发卡顿：
- 源坐标必须钳位：
sx = Math.max(0, Math.min(img.naturalWidth - sw, sx))，同理处理sy - 避免每帧清空整个预览 Canvas；若仅镜片移动，可只重绘镜片区域（
ctx.clearRect()局部）+ 重绘底图（仅必要时） - 用
requestAnimationFrame替代mousemove直触绘制，保证 60fps 流畅性 - 镜片静止时，可将已缩放区域缓存为临时 canvas，移动时仅平移该缓存，省去重复
drawImage缩放计算
