canvas图像切片与局部放大镜的核心是drawimage()九参数控制裁剪与绘制，结合鼠标事件动态更新；切片按网格分割原图并映射坐标，放大镜通过destination-out挖孔+重绘缩放区域实现，需边界校验、合成模式复位及requestanimationframe优化。
Canvas 实现图像切片与局部放大镜，核心在于用 drawImage() 的九参数重载控制源区域裁剪和目标区域绘制，再结合鼠标事件动态更新放大区域和缩放比例。
图像切片：按网格分割原图
切片本质是将一张大图按行列划分为多个小矩形区域，每个区域可独立绘制或交互。关键在于计算每块的源坐标（sx, sy）和尺寸（sw, sh），再映射到画布上的目标位置（dx, dy, dw, dh）。
- 假设原图宽高为
img.width、img.height，要切成rows × cols网格，则每块源宽 =img.width / cols，源高 =img.height / rows - 第
i行第j列切片的源起点为：sx = j * tileWidth，sy = i * tileHeight - 绘制时可等比缩放到指定大小，例如每块显示为 100×100 像素：
ctx.drawImage(img, sx, sy, tileWidth, tileHeight, dx, dy, 100, 100)
局部放大镜：实时截取+缩放+叠加
放大镜效果由三部分构成：原始图像底图、圆形/矩形遮罩层、居中放大的源区域内容。Canvas 不支持直接“透明遮罩”，需手动擦除+重绘。
- 先完整绘制原图：
ctx.drawImage(img, 0, 0) - 获取鼠标位置
(mx, my)，定义放大半径r = 80，计算放大源矩形中心偏移（如放大 3 倍）：srcX = mx - r/3，srcY = my - r/3，srcW = srcH = r*2/3 - 用
globalCompositeOperation = 'destination-out'在画布上挖一个圆形透明区域（即擦除底图） - 再用
drawImage把放大源区域绘制到该圆心位置，尺寸设为r*2 × r*2，实现“放大后填满圆区”
性能优化与交互细节
频繁重绘易卡顿，尤其在鼠标移动中。应避免全图重绘，只更新变化区域；同时注意边界判断，防止越界读取图像数据。
- 使用
requestAnimationFrame替代mousemove直接触发绘制，控制帧率 - 放大源区域必须限制在原图范围内：
srcX = Math.max(0, Math.min(img.width - srcW, srcX))，同理处理srcY - 可缓存放大后的 Canvas（离屏 canvas），当鼠标静止时预渲染一次，移动时仅平移该缓存画布，减少重复缩放计算
- 为提升真实感，放大区域边缘加轻微阴影或描边：
ctx.shadowBlur=5; ctx.shadowColor='#000';
完整流程示例（关键逻辑）
初始化时加载图像，绑定 mousemove 和 mouseleave；每次触发时清空画布（或仅擦除镜片区域），重绘底图，再执行挖孔+放大绘制。切片功能可作为独立按钮切换模式，用二维数组记录各切片状态（是否选中、是否高亮等），点击时触发对应区域的放大逻辑。
不复杂但容易忽略边界校验和合成模式重置——每次用完 destination-out 后记得恢复为 source-over，否则后续绘制会异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
