网页放大镜本质是读取局部像素+拉伸重绘+动态定位，关键在坐标对齐、裁剪控制和帧率管理；通过drawImage九参数截取源区域并拉伸绘制，结合透明擦除与阴影增强真实感，辅以节流、离屏缓存及移动端适配确保流畅稳定。
用 canvas 实现网页放大镜，本质是“读取局部像素 + 拉伸重绘 + 动态定位”，不是简单缩放整张图。关键在坐标对齐、裁剪控制和帧率管理，而不是堆代码。
读取局部像素：靠 drawImage 的九参数精准截取
canvas 本身不提供“取某点像素块”API，但 drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh) 可以直接从原图指定矩形区域（sx/sy 起点，sw/sh 尺寸）拉伸绘制到目标位置。这就是读取+放大的一体化操作。
- 鼠标位置 (mx, my) 是放大中心，先换算成相对于图片左上角的坐标（注意用 img.naturalWidth/Height，不是 CSS 显示宽高）
- 设放大半径为 r，放大倍率 zoom = 3，则源区域宽高 = 2 * r / zoom，起点为 sx = mx - r / zoom，sy = my - r / zoom
- 必须加边界校验：sx = Math.max(0, Math.min(img.naturalWidth - sw, sx))，否则越界会黑块或报错
放大并居中显示：挖孔 + 填充两步走
不能直接覆盖画布——那样会盖住原图背景。正确做法是：先擦出一个透明圆区，再把放大后的内容精准填进去。
- 用 ctx.globalCompositeOperation = 'destination-out' 在画布上画一个圆形，把底图对应区域“擦掉”（变透明）
- 立刻切回默认合成模式：ctx.globalCompositeOperation = 'source-over'，否则后续绘制全失效
- 调用 drawImage 把刚才截取的源区域，按 dw = dh = 2 * r 绘制到 (mx, my) 圆心位置，视觉上就是“镜片里内容被放大填满”
- 给镜片边缘加一点阴影提升真实感：ctx.shadowBlur = 4; ctx.shadowColor = 'rgba(0,0,0,0.3)'
保证流畅不卡顿：节流 + 避免重复计算
mousemove 每秒触发几十次，每次都全量重绘 canvas，低端设备直接掉帧。必须控制执行节奏。
- 不要在 mousemove 里直接绘图，只更新 lastX / lastY 坐标，并标记 needsUpdate = true
- 用 requestAnimationFrame 统一驱动绘制，每次只做一次完整流程，丢弃中间冗余帧
- 放大源图若尺寸很大（比如 4000×3000），可预先用离屏 canvas 缓存缩放结果：offscreenCtx.drawImage(img, sx, sy, sw, sh, 0, 0, cacheW, cacheH)，移动时只平移这张缓存图
- 禁用图像抗锯齿（如需锐利边缘）：ctx.imageSmoothingEnabled = false；保留平滑则确保裁剪坐标取整：Math.round(sx)
适配移动端与常见坑点
PC 和手机交互逻辑不同，很多效果在桌面跑得好，一上真机就偏移或失灵。
- 移动端监听 touchmove，取 touches[0] 坐标，别用 changedTouches（可能为空）
- 手指会遮挡镜片，放大镜位置建议向上/右偏移 30px：dx = mx + 30, dy = my - 30
- iOS Safari 对 canvas 单边尺寸限制约 4096px，超大图先用 canvas.toBlob() 缩放到安全范围再加载
- 最常报错 "The image argument is null"：一定是 img 还没加载完就调 drawImage。务必检查 img.complete && img.naturalWidth > 0，再 onload + 手动判断双保险
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
