[关闭]
@greenfavo 2015-11-30T13:15:59.000000Z 字数 2352 阅读 1138

canvas局部放大镜

html5
在天猫淘宝购物时点开商品详情页把鼠标放到商品图片上移动时，就可以查看商品细节，这就是一个局部放大镜的功能。用canvas可以轻松实现这种功能。

原理分析

之前在慕课网上看的canvas视频上介绍了这种局部放大镜的实现方法，采用了离屏canvas技术。其实就是先在DOM中创建2个canvas，准备一张大图，通过drawImage()方法，把大图缩放成小图放到其中一个canvas中，在另一个canvas里放这张大图,是实际尺寸。把大图隐藏。当鼠标在小图上移动时，就把大图上的像素复制到放大镜上。放大系数就是大图与小图宽度之比。放大的像素只显示在放大镜里，因此要用clip()方法裁剪。

这里用到的API在我上篇文章canvas API详解中有详细介绍。就不多说了。功能很简单，直接上代码吧。

实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>canvas局部放大镜</title>
  6.   <style type="text/css">
  7.   #canvas{
  8.     margin: 30px auto;
  9.     /*设置了block才会居中*/
  10.     display: block;
  11.   }
  12.   #offcanvas{
  13.     display: none;
  14.   }
  15.   </style>
  16. </head>
  17. <body>
  18. <canvas id="canvas"></canvas>
  19. <!-- 离屏canvas -->
  20. <canvas id="offcanvas"></canvas>
  22. <script>
  23.     var canvas=document.getElementById('canvas');
  24.     var context=canvas.getContext('2d');
  26.     var offcanvas=document.getElementById('offcanvas');
  27.     var offcontext=offcanvas.getContext('2d');
  29.     var image=new Image();
  30.     var scale;//放大系数
  32.     canvas.width=500;
  33.     canvas.height=300;
  35.     image.src='images/4.jpg';
  37.     image.onload=function(){
  38.         offcanvas.width=image.width;
  39.         offcanvas.height=image.height;
  40.         scale=offcanvas.width/canvas.width;
  42.         context.drawImage(image,0,0,canvas.width,canvas.height);//不是图片的实际大小,缩放了
  43.         offcontext.drawImage(image,0,0);//是图片的实际大小
  44.     }
  46.     canvas.onmousemove=function(e){
  47.         var point=window_to_canvas(e.clientX,e.clientY);
  48.         //只有小图才调用放大镜
  49.         if (canvas.width<offcanvas.width) {
  50.            show_big_pic(point);
  51.            canvas.style.cursor='move';
  52.         };
  53.     }
  55.     canvas.onmouseout=function(){
  56.         context.clearRect(0,0,canvas.width,canvas.height);
  57.         context.drawImage(image,0,0,canvas.width,canvas.height);
  58.     }
  59.     function show_big_pic(point){
  60.        //清空画布，重新绘制
  61.        context.clearRect(0,0,canvas.width,canvas.height);
  62.        context.drawImage(image,0,0,canvas.width,canvas.height);
  64.        var imgLG_cx=point.x*scale;//大图中心位置
  65.        var imgLG_cy=point.y*scale;
  67.        var mr=100;//放大镜半径
  69.        var sx=imgLG_cx-mr;//源图像起始坐标
  70.        var sy=imgLG_cy-mr;
  72.        var dx=point.x-mr;//目标图像起始坐标
  73.        var dy=point.y-mr;
  75.        context.save();
  77.        context.lineWidth=5;
  78.        context.strokeStyle="#ccc";
  79.        context.beginPath();
  80.        context.arc(point.x,point.y,mr,0,2*Math.PI);//绘制圆形放大镜
  81.        context.stroke();
  82.        context.clip();//剪辑，只在该区域显示
  84.        context.drawImage(offcanvas,sx,sy,2*mr,2*mr,dx,dy,2*mr,2*mr);
  86.        context.restore();
  87.     }
  89.     //鼠标在画布内的距离
  90.     function window_to_canvas(x,y){
  91.         var box=canvas.getBoundingClientRect();
  92.         return{x:x-box.left,y:y-box.top};
  93.     }
  94. </script>
  95. </body>
  96. </html>

注意

当canvas里的图片比图片实际尺寸大时，如果不判断就直接调用放大镜，并不会显示很圆润的放大效果，而是会产生一种从源图像抽离出来的效果。所以应该判断下是否是小图，小图才放大。

每次鼠标移动都是重新将大图中适当位置里的像素复制到放大镜上，所以每次调用放大镜都应该清空放大镜里面的内容，不然内容会重叠。但放大镜每次移动的位置都不一样，不好判断，所以直接把整个画布清空就好了，这时应该重绘小图。

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注