效果截图：

JS代码：

<script>

    // 初始化canvas01和上下文环境

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

    var cxt01 = cav01.getContext('2d');

    // 初始化canvas02和上下文环境

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

    var cxt02 = cav02.getContext('2d');

    //初始化image对象和缩放比例

    var oImg = new Image();

    var scale;

    window.onload = function(){

        //设置图片路径

        oImg.src = 'images/02.jpg';

        //设置主canvas的宽高

        cav01.width = 800;

        cav01.height = 500;

        oImg.onload = function(){

            //设置离屏canvas的宽高，与原始图片的宽高一致

            cav02.width = oImg.width;

            cav02.height = oImg.height;

            //初始化鼠标按下状态和设置缩放比例

            var isMouseDown = false;

            scale = cav02.width/cav01.width;

            //绘制图像到canvas,第二个canvas初始时是隐藏的

            cxt01.drawImage( oImg, 0, 0, cav01.width, cav01.height);

            cxt02.drawImage( oImg, 0, 0, cav02.width, cav02.height); 

            //鼠标按下状态

            cav01.onmousedown = function(e){

                //获取鼠标相对于canvas的坐标

                var pos = getMousePos(e.clientX,e.clientY);

                //阻止鼠标默认事件

                e.preventDefault();

                //调用绘制放大镜方法

                drawFilterImg(true,pos);

                //把isMouseDown标记设置为true;

                isMouseDown = true;

            }

            //鼠标移动状态

            cav01.onmousemove = function(e){

                //获取鼠标相对于canvas的坐标

                var pos = getMousePos(e.clientX,e.clientY);

                e.preventDefault();

                //根据isMouseDown状态，调用绘制放大镜方法

                if(isMouseDown == true ){

                    drawFilterImg(true,pos);

                }

            }

            // 鼠标抬起状态

            cav01.onmouseup = function(e){

                //获取鼠标相对于canvas的坐标

                var pos = getMousePos(e.clientX,e.clientY);

                e.preventDefault();

                //调用绘制放大镜方法

                drawFilterImg(false);

                //把isMouseDown状态设置为false

                isMouseDown = false;

            }

        }

        // 绘制放大镜方法 flag:用于判断是否开始绘制,pos:鼠标相对于canvas画布的坐标

        function drawFilterImg(flag,pos){

            //每次调用先清空canvas画布，避免出现重复图像

            cxt01.clearRect( 0, 0, cav01.width, cav01.height);

            cxt01.drawImage( oImg, 0, 0, cav01.width, cav01.height);

            //定义放大镜半径

            var r = 100;

            if(flag == true){

                //调用绘制放大区域方法

                drawFilterImgCon(pos,r);

            }

        }

        //绘制放大区域方法

        function drawFilterImgCon(pos,r){

            //大图图像上开始剪切的坐标

            var sx = pos.x*scale - r;

            var sy = pos.y*scale - r;

            //画在canvas上的坐标

            var dx = pos.x - r;

            var dy = pos.y - r;

            cxt01.save();

            cxt01.strokeStyle = 'rgba(0,0,0,0.3)';

            cxt01.lineWidth = 2;

            cxt01.beginPath();

            cxt01.arc( pos.x, pos.y, r, 0 , Math.PI*2);

            cxt01.stroke();

            cxt01.clip();

            cxt01.drawImage( cav02, sx, sy, r*2, r*2, dx, dy, r*2, r*2);

            cxt01.restore();

        }

        //定义获取鼠标在canvas上位置的方法

        //x：鼠标距离窗口的x坐标，y：鼠标距离窗口的y坐标

        function getMousePos(x,y){

            var oCanPos = cav01.getBoundingClientRect();

            return {

                x: x-oCanPos.left,

                y: y-oCanPos.top

            }

        }

    }

</script>

HTML代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas图片放大镜</title>

    <style>

        body{ background-color: #333; padding-top: 60px; }

        #cav01{ display: block; margin: 0 auto; }

        #cav02{ display: none;}

    </style>

</head>

<body>

    <!-- 主canvas -->

    <canvas id="cav01" style="border:1px solid #666;"></canvas>

    <!-- 离屏canvas,用于放置放大的图片，默认状态为隐藏 -->

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

</body>

</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. 玩转Vim-札记（二）

    玩转Vim-札记(二) 距上篇博文已有一周有余,上次主要介绍了编辑器之神Vim的起源.安装并介绍了两种模式以及一些简单的操作.本次将继续对Vim的使用进行介绍. 登堂入室 首先接着说移动吧: 0 → ...

  2. 关于相对布局RelativeLayout的各种属性介绍

    RelativeLayout相对布局是个人觉得在android布局中比较常用且好用的一个,当然如果想让布局更漂亮是需要多种布局混合搭建的,这里就需要更深入的学习了,在这只介绍下有关相对布局的东西. 相 ...

  3. Python网络编程（socketserver、TFTP云盘、HTTPServer服务器模型）

    HTTP协议? HTTP是一个应用层协议,由请求和响应构成,是一个标准的客户端服务器模型.HTTP是一个无状态的协议. 通常承载于TCP协议之上,有时也承载于TLS或SSL协议层之上,这个时候,就成了 ...

  4. python基础训练营04-函数

    任务四  函数的关键字 函数的定义 函数参数与作用域 函数返回值 一.函数的关键字: def 二.函数的定义: 在Python中,定义一个函数要使用def语句,依次写出函数名.括号.括号中的参数和冒号 ...

  5. DP入门（1）——数字三角形问题

    一.问题描述 如上图所示,有一个由非负整数组成的三角形,第一行只有一个数,除了最下行之外每个数的左下方和右下方各有一个数.现请你在此数字三角形中寻找一条从首行到最下行的路径,使得路径上所经过的数字之和 ...

  6. 第1讲——用C++写一个程序

    一.学习新知识 在学习C++之前学过C语言了,一些基础的就不bb了,进入正题. 来几个小程序练练手: [程序1] #include <iostream> //头文件 using names ...

  7. Week1 Team Homework #2 from Z.XML-Introduction of team member with photos

    <Z.XML Introduction of each team member, with photos Z=周敏轩; X=肖俊鹏&薛亚杰; M= 毛宇 & 马辰; L=  李孟 ...

  8. c# 自动关机代码

    #region 关机代码 //C#关机代码 // 这个结构体将会传递给API.使用StructLayout //(...特性,确保其中的成员是按顺序排列的,C#编译器不会对其进行调整. [Struct ...

  9. mysql与hive2.1.1安装和配置

    1.mysql安装 这个安装很简单,是在线安装,只需要按顺序执行一下几个命令就ok了. (1)sudo apt-get install mysql-server (2)sudo apt-get ins ...

  10. STL Allocator

    从上面这个程序可以看出,我们这里手动使用了分配器,分配器有很多种类,有std::,还有非std::,也就是上面的__gnu_cxx下面的,我们在使用容器的时候不关心我们使用什么分配器,也不关心我们如何 ...