Canvas 实现放大镜效果.docVIP

Canvas 实现放大镜效果 原理 首先选择图片的一块区域，然后将这块区域放大，然后再绘制到原先的图片上，保证两块区域的中心点一致, 如下图所示: 初始化 canvas id=canvas width=500 height=500 /canvas img src=image.png style=display: none id=img 获得 canvas 和 image 对象，这里使用 img 标签预加载图片, 关于图片预加载可以看这里 var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); var img = document.getElementById(img); 设置相关变量 // 图片被放大区域的中心点，也是放大镜的中心点 var centerPoint = {}; // 图片被放大区域的半径 var originalRadius = 100; // 图片被放大区域 var originalRectangle = {}; // 放大倍数 var scale = 2; // 放大后区域 var scaleGlassRectangle 画背景图片 function drawBackGround() { context.drawImage(img, 0, 0); } 计算图片被放大的区域的范围 这里我们使用鼠标的位置作为被放大区域的中心点(放大镜随着鼠标移动而移动)，因为 canvas 在画图片的时候，需要知道左上角的坐标以及区域的宽高，所以这里我们计算区域的范围 function calOriginalRectangle(point) { originalRectangle.x = point.x - originalRadius; originalRectangle.y = point.y - originalRadius; originalRectangle.width = originalRadius * 2; originalRectangle.height = originalRadius * 2; } 绘制放大镜区域 裁剪区域 放大镜一般是圆形的，这里我们使用 clip 函数裁剪出一个圆形区域，然后在该区域中绘制放大后的图。一旦裁减了某个区域，以后所有的绘图都会被限制的这个区域里，这里我们使用 save 和 restore 方法清除裁剪区域的影响。save 保存当前画布的一次状态，包含 canvas 的上下文属性，例如 style，lineWidth 等，然后会将这个状态压入一个堆栈。restore 用来恢复上一次 save 的状态，从堆栈里弹出最顶层的状态。 context.save(); context.beginPath(); context.arc(centerPoint.x, centerPoint.y, originalRadius, 0, Math.PI * 2, false); context.clip(); ...... context.restore(); 计算放大镜区域 通过中心点、被放大区域的宽高以及放大倍数，获得区域的左上角坐标以及区域的宽高。 scaleGlassRectangle = { x: centerPoint.x - originalRectangle.width * scale / 2, y: centerPoint.y - originalRectangle.height * scale / 2, width: originalRectangle.width * scale, height: originalRectangle.height * scale } 绘制图片 在这里我们使用 context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 方法，将 canvas 自身作为一副图片，然后取被放大区域的图像，将其绘制到放大镜区域里。 context.drawImage(canvas, originalRectangle.x, originalRectangle.y, originalRectangle.width, originalRectangle.height, scaleGlassRectangle.x, scaleGlassRectangle.y, scaleGlassRectangle.width, scaleGlassRectangle.height ); 绘制放大边缘 creat