canvas绘制渐变图形（Canvas实现放大镜效果完整案例分析附代码）

  <canvas id="canvas"></canvas>

//定义canvas画布
var canvas1 = document.getElementById('canvas1');
    ctx1 = canvas.getContext('2d');

//模糊图片加载
var image1 = new Image();
image1.src = "./模糊.jpg" alt="canvas绘制渐变图形（Canvas实现放大镜效果完整案例分析附代码）" border="0" />

<canvas id="canvas2" style="display:none"></canvas>

var canvas2 = document.getElementById('canvas2'),
    ctx2 = canvas2.getContext('2d'),
    scale = 2; // 放大倍数

// canvas2的图片大小是模糊图片的2倍
canvas2.width = canvas.width * scale;
canvas2.height = canvas.height * scale;

// 在canvas2中加载图片
var image2 = new Image();
image2.src = "name2.jpg" alt="canvas绘制渐变图形（Canvas实现放大镜效果完整案例分析附代码）" border="0" />

// 保存当前状态
ctx1.save();
// 边框
ctx1.strokeStyle = "#9eddf1";
ctx1.lineWidth = 3;
// 开始绘制
ctx1.beginPath();
// ⚪
ctx1.arc(x, y, mr, 0, Math.PI * 2);
ctx1.stroke();
// 表示剪切
ctx1.clip();

// 画图
ctx1.drawImage(that.canvas2, sx, sy, 2 * mr, 2 * mr, dx, dy, 2 * mr, 2 * mr);

// 释放当前状态
ctx1.restore();

// 圆的半径是mr
var mr = 100;

// 对应模糊图的左上角起点
var dx = x - mr,
    dy = y - mr;

// 找出清晰图截图的左上角起点
var sx = x * scale - mr,
    sy = y * scale- mr;

   ...
    ctx.clip();
    // 在对应的位置上重新绘制图片
    //drawImage(img,sx,sy,swidth,sheight,x,y,width,height) 9个参数时
    //img: 图片/canvas
    //sx: 图片的X起点
    //sy: 图片的Y起点
    //swidth:要绘制的图片选取的宽度
    //sheight:要绘制的图片选取的高度
    //x,y:图片在canvas上显示的位置
    //width,height:在Canvas上要显示的大小
    ctx1.drawImage(canvas2, sx, sy, 2 * mr, 2 * mr, dx, dy, 2 * mr, 2 * mr);    
    ...

//定义一个判断鼠标是否是点击滑动的标识符
var flag;

//鼠标点入事件
canvas.onmousedown = function(e) {
  flag = true;
  //显示放大镜
}
// 鼠标移动事件
canvas.onmousemove = function(e) {
  if (flag) {
    //显示放大镜
  }
}
//鼠标松开事件
canvas.onmouseup = function(e) {
  flag = false;
  // 隐藏放大镜
}
//鼠标离开事件
canvas.onmouseout = function(e) {
  flag = false;
  // 隐藏放大镜
}

var scale = 3;
var mr = 150;
var photo = {
  //初始化
  init: function() {
    var that = this;

    that.canvas = document.getElementById('canvas');
    that.ctx = that.canvas.getContext('2d');

    that.canvas2 = document.getElementById('canvas2');
    that.ctx2 = that.canvas2.getContext('2d');

    that.canvas.width = 800;
    that.canvas.height = 500;

    that.canvas2.width = that.canvas.width * scale;
    that.canvas2.height = that.canvas.height * scale;
    that.image1 = new Image();
    that.image1.src = "./name3.jpg" alt="canvas绘制渐变图形（Canvas实现放大镜效果完整案例分析附代码）" border="0" />