Canvas完成变大镜实际效果详细实例☀剖析(附编码

2021-03-24 03:04 jianzhan

文中关键纪录 canvas 在图象、文本解决、离屏技术性和变大镜动画特效的完成全过程中应用到的API。首先看下实际效果吧：

一张模糊不清的照片：

电脑鼠标点一下随意部位，造成变大实际效果：

哇塞~ 一个帅哥，嘿嘿嘿嘿~

1、变大镜基本原理

完成实际效果：如圖，点一下或点一下拖动电脑鼠标显示信息一个地区，地区中显示信息相匹配点一下一部分范畴的变大清楚照片。那麼难题便可以支解为3一部分：

1、怎样在canvas（模糊不清图）上再绘制此外一个canvas（清楚变大图）；

2、怎样将canvas中显示信息的（清楚变大图）裁切出圆形地区。

3、怎样在电脑鼠标点一下拖动的情况下显示信息该区域域；

2、显示信息模糊不清相片

实际上一一样的互动并不是模糊不清相片，这儿我仅仅以便浮夸下实际效果，用了张模糊不清的原照，嘿嘿哈，canvas自身是能够对清楚的照片做ps滤镜解决，涉及到到许多图型学的优化算法，随后我不会会，默默地的开启了PS手动式高斯函数模糊不清了一张相片...嗯，没问题！

最先界定一个 canvas 原素

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

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

//模糊不清照片载入
var image1 = new Image();
image1.src = "./模糊不清.png";

//照片载入取得成功后绘图照片
image1.onload = function() {
  //drawImage 在画布上绘图模糊不清照片
  ctx1.drawImage(image1, 0, 0, canvas1.width, canvas1.height);
};

ctx1.drawImage(照片，x部位，y部位，照片显示信息总宽，照片显示信息高宽比)

3、载入清楚照片

大家加上一个canvas（变大镜见到的照片），原始掩藏:

<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.png";

image2.onload = function() {
  ctx2.drawImage(image2, 0, 0, canvas2.width, canvas2.height);
};

4、显示信息变大镜

4.1 绘图变大镜

电脑鼠标所在的部位点(x,y)是地区的管理中心，测算出清楚图所属的部位点，提取圆形

// 储存当今情况
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();

绘图情况的最好搭档save()和restore()：用以对当今情况的储存及释放出来不危害别的实际操作；能用于反复的绘图图型的转变全过程；

clip()：表明裁切地区

4.2 离屏技术性

说白了的离屏技术性便是在一个canvas上绘图此外一个canvas，前边应用的绘图照片的API是 drawImage() ，它各自能够适用，3个、五个和9个主要参数；在其中第一个主要参数既能够是照片，还可以是canvas目标！那麼大家便可令其用这一方式，在圆上绘图出清楚图了~

// 圆的半径是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);    
    ...

5、电脑鼠标互动恶性事件

实际效果：电脑鼠标点一下并拖动电脑鼠标造成反映，松掉电脑鼠标或是清除画布则无效。

//界定一个分辨电脑鼠标是不是是点一下拖动的标志符
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";

    that.image2 = new Image();
    that.image2.src = "./name4.jpg";

    that.image1.onload = function() {
      that.ctx.drawImage(that.image1, 0, 0, that.canvas.width, that.canvas.height);
    };

    that.image2.onload = function() {
      that.ctx2.drawImage(that.image2, 0, 0, that.canvas2.width, that.canvas2.height);
      that.moveEvt();
    };
  },

  bigerImage: function(x, y) {
    var that = this;
    var imageX = x * scale,
      imageY = y * scale,
      sx = imageX - mr,
      sy = imageY - mr;

    var dx = x - mr,
      dy = y - mr;

    that.ctx.save();

    that.ctx.strokeStyle = "#9eddf1";
    that.ctx.lineWidth = 3;

    that.ctx.beginPath();
    that.ctx.arc(x, y, mr, 0, Math.PI * 2);


    that.ctx.shadowColor = "#6ed25b";
    that.ctx.shadowBlur = 10;

    that.ctx.stroke();
    that.ctx.clip();

    that.ctx.drawImage(that.canvas2, sx, sy, 2 * mr, 2 * mr, dx, dy, 2 * mr, 2 * mr);

    that.ctx.restore();
  },

  //移动
  moveEvt: function() {
    var that = this;
    that.canvas.onmousedown = function(e) {
    	that.flag = true;
      that.showImage(e);
    }

    that.canvas.onmousemove = function(e) {
      if (that.flag) {
        that.showImage(e)
      }
    }

    that.canvas.onmouseup = function(e) {
      that.hideImage(e)
    }

    that.canvas.onmouseout = function(e) {
      that.hideImage(e)
    }
  },

  showImage: function(e) {
    e.preventDefault()
    var x = e.offsetX,
      y = e.offsetY,
      that = this;
    that.ctx.clearRect(0, 0, that.canvas.width, that.canvas.height);
    that.ctx.drawImage(that.image1, 0, 0, that.canvas.width, that.canvas.height);
    that.bigerImage(x, y);
  },

  hideImage: function(e) {
    e.preventDefault()
    var that = this;
    
    that.flag = false;
    that.ctx.clearRect(0, 0, that.canvas.width, that.canvas.height);
    that.ctx.drawImage(that.image1, 0, 0, that.canvas.width, that.canvas.height);
  }
}

window.onload = function() {
  photo.init();
}

到此这篇有关Canvas完成变大镜实际效果详细实例剖析(附编码)的文章内容就详细介绍到这了,大量有关Canvas 变大镜內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！

Canvas完成变大镜实际效果详细实例☀剖析(附编码

为您推荐