Canvas实现放大镜效果完整案例分析(附代码)

发布时间：2020-12-02 09:27:27 所属栏目：编程来源：网络整理

导读：这篇文章首要先容了Canvas实现放大镜结果完备案例说明(附代码),文中通过示例代码先容的很是具体，对各人的进修可能事变具有必然的参考进修代价，必要的伴侣们下

鼠标点击恣意位置，发生放大结果：

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

1、放大镜道理

实现结果：如上图，点击或点击滑动鼠标表现一个地区，地区中表现对应点击部门范畴的放大清楚图片。那么题目就可以肢解为3部门：

1、如安在canvas（恍惚图）上再画出其它一个canvas（清楚放大图）；

2、怎样将canvas中表现的（清楚放大图）剪切出圆形地区。

3、如安在鼠标点击滑动的时辰表现该地区；

2、表现恍惚照片

着实一样平常的交互不是恍惚照片，这里我只是为了浮夸下结果，用了张恍惚的原图，哈哈哈，canvas自己是可以对清楚的图片做滤镜处理赏罚，涉及到许多图形学的算法，然后我不会，冷静的打开了PS手动高斯恍惚了一张照片...嗯，没短处！

起首界说一个 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（放大镜看到的图片），初始潜匿:

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个、5个和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; // 潜匿放大镜 }

完备代码：

到此这篇关于Canvas实现放大镜结果完备案例说明(附代码)的文章就先容到这了,更多相干Canvas 放大镜内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys