关于canvas实现放大镜效果

Question

使用canvas实现了放大镜效果先画张图片到img上在鼠标on 和move 于canvas时实现放大镜效果，可以借助于离屏canvas当鼠标on 和move于canvas时，将鼠标所在地址（x,y）作为正方形的中心，并将正方形区域内的像素数据放置到离屏canvas中，然后将离屏canvas放置于canvas对应位置，放置时使这部分的像素数据放大一定倍数。此处，为了方便，可以将离屏canvas的大小设置为与正方形的大小一致根据以上步骤也实现了放大效果，我现在的疑问是，如何实现一个圆形的放大镜呢， 离屏canvas 的形状只能是矩形的，putImageData() 和 drawImage()也都只能放置 获取矩形区域内的像素数据，，所以，圆形的放大镜该如何实现呢？

Answer 1

canvas 有一个clip 方法，可以用来剪切画布中任意形状和尺寸；剪出来放到 arc()画出的圆圈中