效果截图：

JS代码：

  1. <script>
  2.     // 初始化canvas01和上下文环境
  3.     var cav01 = document.getElementById('cav01');
  4.     var cxt01 = cav01.getContext('2d');
  5.  
  6.     // 初始化canvas02和上下文环境
  7.     var cav02 = document.getElementById('cav02');
  8.     var cxt02 = cav02.getContext('2d');
  9.  
  10.     //初始化image对象和缩放比例
  11.     var oImg = new Image();
  12.     var scale;
  13.  
  14.     window.onload = function(){
  15.  
  16.         //设置图片路径
  17.         oImg.src = 'images/02.jpg';
  18.  
  19.         //设置主canvas的宽高
  20.         cav01.width = 800;
  21.         cav01.height = 500;
  22.  
  23.         oImg.onload = function(){
  24.  
  25.             //设置离屏canvas的宽高，与原始图片的宽高一致
  26.             cav02.width = oImg.width;
  27.             cav02.height = oImg.height;
  28.  
  29.             //初始化鼠标按下状态和设置缩放比例
  30.             var isMouseDown = false;
  31.             scale = cav02.width/cav01.width;
  32.  
  33.             //绘制图像到canvas,第二个canvas初始时是隐藏的
  34.             cxt01.drawImage( oImg, 0, 0, cav01.width, cav01.height);
  35.             cxt02.drawImage( oImg, 0, 0, cav02.width, cav02.height); 
  36.  
  37.             //鼠标按下状态
  38.             cav01.onmousedown = function(e){
  39.  
  40.                 //获取鼠标相对于canvas的坐标
  41.                 var pos = getMousePos(e.clientX,e.clientY);
  42.  
  43.                 //阻止鼠标默认事件
  44.                 e.preventDefault();
  45.  
  46.                 //调用绘制放大镜方法
  47.                 drawFilterImg(true,pos);
  48.  
  49.                 //把isMouseDown标记设置为true;
  50.                 isMouseDown = true;
  51.             }
  52.  
  53.             //鼠标移动状态
  54.             cav01.onmousemove = function(e){
  55.                 //获取鼠标相对于canvas的坐标
  56.                 var pos = getMousePos(e.clientX,e.clientY);
  57.                 e.preventDefault();
  58.  
  59.                 //根据isMouseDown状态，调用绘制放大镜方法
  60.                 if(isMouseDown == true ){
  61.                     drawFilterImg(true,pos);
  62.                 }
  63.             }
  64.  
  65.             // 鼠标抬起状态
  66.             cav01.onmouseup = function(e){
  67.  
  68.                 //获取鼠标相对于canvas的坐标
  69.                 var pos = getMousePos(e.clientX,e.clientY);
  70.                 e.preventDefault();
  71.  
  72.                 //调用绘制放大镜方法
  73.                 drawFilterImg(false);
  74.  
  75.                 //把isMouseDown状态设置为false
  76.                 isMouseDown = false;
  77.             }
  78.         }
  79.  
  80.         // 绘制放大镜方法 flag:用于判断是否开始绘制,pos:鼠标相对于canvas画布的坐标
  81.         function drawFilterImg(flag,pos){
  82.  
  83.             //每次调用先清空canvas画布，避免出现重复图像
  84.             cxt01.clearRect( 0, 0, cav01.width, cav01.height);
  85.             cxt01.drawImage( oImg, 0, 0, cav01.width, cav01.height);
  86.  
  87.             //定义放大镜半径
  88.             var r = 100;
  89.  
  90.             if(flag == true){
  91.                 //调用绘制放大区域方法
  92.                 drawFilterImgCon(pos,r);
  93.             }
  94.         }
  95.         //绘制放大区域方法
  96.         function drawFilterImgCon(pos,r){
  97.  
  98.             //大图图像上开始剪切的坐标
  99.             var sx = pos.x*scale - r;
  100.             var sy = pos.y*scale - r;
  101.  
  102.             //画在canvas上的坐标
  103.             var dx = pos.x - r;
  104.             var dy = pos.y - r;
  105.  
  106.             cxt01.save();
  107.  
  108.             cxt01.strokeStyle = 'rgba(0,0,0,0.3)';
  109.             cxt01.lineWidth = 2;
  110.  
  111.             cxt01.beginPath();
  112.             cxt01.arc( pos.x, pos.y, r, 0 , Math.PI*2);
  113.             cxt01.stroke();
  114.             cxt01.clip();
  115.  
  116.             cxt01.drawImage( cav02, sx, sy, r*2, r*2, dx, dy, r*2, r*2);
  117.  
  118.             cxt01.restore();
  119.         }
  120.  
  121.         //定义获取鼠标在canvas上位置的方法
  122.         //x：鼠标距离窗口的x坐标，y：鼠标距离窗口的y坐标
  123.         function getMousePos(x,y){
  124.             var oCanPos = cav01.getBoundingClientRect();
  125.             return {
  126.                 x: x-oCanPos.left,
  127.                 y: y-oCanPos.top
  128.             }
  129.         }
  130.     }
  131.  
  132. </script>

HTML代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>canvas图片放大镜</title>
  6.     <style>
  7.         body{ background-color: #333; padding-top: 60px; }
  8.         #cav01{ display: block; margin: 0 auto; }
  9.         #cav02{ display: none;}
  10.     </style>
  11. </head>
  12. <body>
  13.     <!-- 主canvas -->
  14.     <canvas id="cav01" style="border:1px solid #666;"></canvas>
  15.     <!-- 离屏canvas,用于放置放大的图片，默认状态为隐藏 -->
  16.     <canvas id="cav02"></canvas>
  17. </body>
  18. </html>

来源：慕课网Canvas玩转图像处理

canvas知识02：图片放大镜效果的更多相关文章

  1. WPF设置VistualBrush的Visual属性制作图片放大镜效果

    原文:WPF设置VistualBrush的Visual属性制作图片放大镜效果 效果图片:原理:设置VistualBrush的Visual属性,利用它的Viewbox属性进行缩放. XAML代码:// ...

  2. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  3. 原生javascript实现图片放大镜效果

    当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...

  4. 【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果

    实现功能: 模仿淘宝图片放大效果,鼠标移动到小图片的某一处,放大镜对应显示大图片的相应位置. 实现效果: 实现代码: <!DOCTYPE html> <html> <he ...

  5. javascript图片放大镜效果展示

    javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...

  6. jQuery实现图片放大镜效果

    实现图片放大镜的原理: 给放大镜元素一个对应的html元素为<div class='right'> 设置这个div的宽高固定为某个值(350px,350px) 设置div的css为超出部分 ...

  7. Canvas + JavaScript 制作图片粒子效果

    首先看一下源图和转换成粒子效果的对比图:       左侧图片为源图,右侧图片为粒子效果图.该效果是在Canvas画布上制作的.将图片制作成粒子效果相对而言是比较简单的.重点了解两个知识点即可 1:图 ...

  8. 用css3的cursor:zoom-in/zoom-out实现微博看图片放大镜效果

    1.前言 CSS3的出现解决了很多让人头疼的问题,至少我想很多童鞋都这样认为.css3的cursor属性大家用的应该是非常的多的,我想用的比较多的像cursor:pointer;cursor:help ...

  9. Jquery插件开发之图片放大镜效果(仿淘宝)

    原网转载地址:http://www.cnblogs.com/hnvvv/archive/2011/11/19/2255197.html 需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部 ...

随机推荐

  1. ABAP CDS ON HANA-(12)ODATA　Service

    Create a CDS view and we have the view type as ‘BASIC’ view To publish this as oData, add the annota ...

  2. BFS 队列

    Plague Inc. is a famous game, which player develop virus to ruin the world. JSZKC wants to model thi ...

  3. 新版IdFTP解决中文乱码问题

    用XE10后开发FTP客户端,发现有中文乱码问题.这里也主要是编码的问题,在connect链接后,需要设置编码方可. 注意:  IndyTextEncoding_OSDefault;   该代码可能需 ...

  4. elasticsearch 拼音+ik分词，spring data elasticsearch 拼音分词

    elasticsearch 自定义分词器 安装拼音分词器.ik分词器 拼音分词器: https://github.com/medcl/elasticsearch-analysis-pinyin/rel ...

  5. python linecache读取过程

    最近使用Python编写日志处理脚本时,对Python的几种读取文件的方式进行了实验.其中,linecache的行为引起了我的注意. Python按行读取文件的经典方式有以下几种: with open ...

  6. vue路由文档笔记

    引入router this.$router 和 router 使用起来完全一样.我们使用 this.$router 的原因是我们并不想在每个独立需要封装路由的组件中都导入路由 可以在任何组件内通过 t ...

  7. Java IO学习--File类

    一.File类 File类具备一定的误导性,可能容易认为它指代的是文件,实际并非如此,它既能代表一个特定文件的名称,又能表示一个目录下一组文件的名称.简而言之,File类是文件或者目录路径名的抽象表示 ...

  8. Visual Studio 2013安装包

    点击下载

  9. python xlrd处理表格常用方法

    1.导入模块import xlrd2.打开Excel文件读取数据data = xlrd.open_workbook('excelFile.xls')3.使用技巧获取一个工作表 table = data ...

  10. 官方文档 恢复备份指南八 RMAN Backup Concepts

    本章内容 Consistent and Inconsistent RMAN Backups Online Backups and Backup Mode Backup Sets Image Copie ...