Canvas局部放大镜核心是双canvas结构：主canvas显示原图，缩放canvas作为镜片浮层，通过drawImage坐标映射实现裁剪缩放，并实时跟随鼠标更新；需处理边界限制、坐标换算、requestAnimationFrame优化及视觉增强。
Canvas 局部放大镜效果，核心是用两个 canvas：一个显示原图（主画布），另一个作为放大区域的“镜片”（缩放画布），通过 drawImage 的源/目标坐标控制裁剪与拉伸，再实时跟随鼠标位置更新镜片内容。
1. 基础结构：双 canvas 布局
页面中放两个重叠的 <canvas></canvas>，主 canvas 显示原始图像，放大 canvas 浮在上方、尺寸较小（比如 200×200），用 CSS 定位到鼠标附近：
- 主 canvas 设置
position: relative，放大 canvas 设为position: absolute - 放大 canvas 的
z-index高于主 canvas，且设置pointer-events: none，避免遮挡鼠标事件 - 放大 canvas 尺寸建议设为固定值（如 200×200），便于计算缩放比例和坐标映射
2. 坐标映射与缩放逻辑
鼠标在主 canvas 上移动时，需把鼠标坐标换算成原图中的像素位置，再以此为中心截取一小块区域，绘制到放大 canvas 上并放大显示：
- 假设放大倍数为
scale = 3，镜片大小为lensW × lensH（如 200×200），则实际从原图截取的区域宽高为lensW / scale和lensH / scale - 设鼠标在主 canvas 上坐标为
(mx, my)，原图已绘制在 canvas 上（可能有缩放或偏移），需先还原到原图像素坐标（例如：若原图宽高为imgW × imgH，canvas 显示宽高为canW × canH，则原图像素坐标为x = mx * imgW / canW） - 以该点为中心，计算截取矩形：
sx = x - halfSrcW,sy = y - halfSrcH，其中halfSrcW = (lensW / scale) / 2 - 调用
lensCtx.drawImage(img, sx, sy, srcW, srcH, 0, 0, lensW, lensH)即可完成局部放大绘制
3. 边界处理与平滑体验
鼠标靠近图像边缘时，截取区域可能超出原图范围，需限制坐标不越界：
立即学习“前端免费学习笔记（深入）”；
-
sx = Math.max(0, Math.min(sx, imgW - srcW))，同理处理sy - 为避免镜片突然跳变，可加简单缓动：记录上一帧镜片中心，新位置按比例插值过渡（如
targetX = 0.2 * newX + 0.8 * lastX） - 放大 canvas 可加圆角边框或阴影增强视觉识别：
ctx.shadowBlur = 8; ctx.shadowColor = 'rgba(0,0,0,0.3)'
4. 性能优化要点
高频 mousemove 下频繁重绘放大 canvas 可能卡顿，注意以下几点：
- 使用
requestAnimationFrame节流绘制，而非直接绑定 mousemove 回调 - 只在鼠标真正进入主 canvas 区域时才启用监听，离开时暂停
- 放大 canvas 清空后只重绘必要区域（
clearRect后立即 drawImage，避免全屏重绘） - 若原图很大，考虑预缩放为适合 canvas 绘制的尺寸，避免每次读取超大图像数据
不复杂但容易忽略的是坐标对齐和边界判断——稍有偏差就会出现镜片抖动或黑边。把原图尺寸、canvas 显示尺寸、鼠标坐标、镜片参数四者关系理清，效果就稳了。
