关于canvas实现放大镜效果

Question

使用canvas实现了放大镜效果

1. 先画张图片到img上

2. 在鼠标on 和move 于canvas时实现放大镜效果，可以借助于离屏canvas

3. 当鼠标on 和move于canvas时，将鼠标所在地址（x,y）作为正方形的中心，并将正方形区域内的像素数据放置到离屏canvas中，然后将离屏canvas放置于canvas对应位置，放置时使这部分的像素数据放大一定倍数。

4. 此处，为了方便，可以将离屏canvas的大小设置为与正方形的大小一致

根据以上步骤也实现了放大效果，

我现在的疑问是，如何实现一个圆形的放大镜呢， 离屏canvas 的形状只能是矩形的，putImageData() 和 drawImage()也都只能放置 获取矩形区域内的像素数据，，

所以，圆形的放大镜该如何实现呢？

Answer 1

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