canvas实现图像放大镜

    //获取到canvas元素

    var canvas = document.getElementById('canvas');

    //获取canvas中的画图环境

    var context = canvas.getContext('2d');

    var img = new Image();

    img.src = "./image/liuyifei.jpg";

    window.onload = function(){

      //获取放大镜

      getfangdajing(context,canvas,img,150,2);

    }

    /*

    *  context:绘制环境对象,

    *  element:canvas元素对象

    *  img：图片对象

    *  diameter:放大镜的大小，

    *  ratio：图形的放大比例，

    * （比例 = 原图 ：镜中图像）01放大图像

    * */

    function getfangdajing(context,element,img,diameter,ratio){

      //绘制图片

      context.drawImage(img,0,0,element.width,element.height);

      //鼠标在element中移动触发事件

      element.onmousemove = function (e){

        context.clearRect(0,0,element.width,element.height);

        //绘制图片

        context.drawImage(img,0,0,element.width,element.height);

        //解决浏览器兼容问题

        var e = e ? e : window.event;

        //获取鼠标在element元素中的坐标值

        var cxy = windowToCanvas(element,e.clientX,e.clientY);

        context.save();//保存当前绘制环境

        //获取放大镜

        getClip(context,cxy.x,cxy.y,diameter/2);

        //将内容放入到放大镜中显示

        //根据鼠标点的坐标值计算出在原图的坐标值

        var ytx0=img.width/element.width*cxy.x;//计算出鼠标在原图的X坐标值

        var yty0=img.height/element.height*cxy.y//计算出鼠标在原图的Y坐标值

        //（原图形/显示图形比例）* （放大镜直径/比例= 镜中的图形所占大小）= 原图要截取的图像大小

        var ytclipValueW = img.width/element.width*diameter/ratio;//在原图截取图片的宽度

        var ytclipValueH = img.height/element.height*diameter/ratio;//在原图截取图片的宽度

        //.drawImage(图像对象,原图像截取的起始X坐标,原图像截取的起始Y坐标,原图像截取的宽度,原图像截取的高度，

        // 绘制图像的起始X坐标,绘制图像的起始Y坐标,绘制图像所需要的宽度,绘制图像所需要的高度);

        context.drawImage(img,ytx0-ytclipValueW/2,yty0-ytclipValueH/2,ytclipValueW,ytclipValueH,cxy.x-diameter/2,cxy.y-diameter/2,diameter,diameter);

        context.restore();//恢复当前保存的绘制环境

      }

    }

    /*

    * 获取放大镜框：进行图层切割

    * context：绘制环境对象

    * x:鼠标在画布中的X坐标

    * y:鼠标在画布中的Y坐标

    * r:放大镜的直径

    * */

    function getClip(context,x,y,r){

      context.beginPath();

      context.arc(x,y,r,0,Math.PI*2,false);

      context.stroke();

      context.clip();//沿形状切除向外的图层

    }

    /*

    * 坐标转换：将window中的坐标转换到元素盒子中的坐标，并返回(x,y)坐标

    * element：canvas元素对象

    * x:鼠标在当前窗口X坐标值

    * y:鼠标在当前窗口Y坐标值

    * */

    function windowToCanvas(element,x,y){

      //获取当前鼠标在window中的坐标值

      // alert(event.clientX+"-------"+event.clientY);

      //获取元素的坐标属性

      var box = element.getBoundingClientRect();

      var bx = x - box.left;

      var by = y - box.top;

      return {x:bx,y:by};

    }