效果截图：

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. ansible结合SHELL搭建自己的CD持续交付系统

    一. 设计出发点 因公司业务面临频繁的迭代上线,一日数次.仅仅依靠手工效率过低且易出错. 考虑搭建一套可以满足现有场景的上线系统. 二 .为何采用ansible+shell方式 1.可控性(完全自主拥 ...

  2. FIFO的使用场景

    (1) 数据的缓冲.如模型图所示,如果数据的写入速率高,但间隔大,且会有突发;读出速率小,但相对均匀.则通过设置相应深度的FIFO,可以起到数据暂存的功能,且能够使后续处理流程平滑,避免前级突发时,后 ...

  3. table调整td宽度整理-完美解决--费元星前端

    个人整理例子,留下做个备份 最终重要的几句话 0.日期格式 format="ognl:dateFormat" <td align="center"> ...

  4. 通过数据库恢复SharePoint网站

           SharePoint网站一般包含很多个数据库,最主要的有3个,分别是SharePoint_Admin_Content(管理中心数据库),SharePoint_Config(配置数据库)和 ...

  5. restAssured + TestNG测试接口，以下是一个get 请求。

    package Elaine.Test.G.APITest; import org.testng.Assert;import org.testng.annotations.BeforeTest;imp ...

  6. flask - 1

    from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello, Worl ...

  7. HDU 5794 A Simple Chess Lucas定理+dp

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5794 题意概述: 给出一个N*M的网格.网格上有一些点是障碍,不能经过.行走的方式是向右下角跳马步.求 ...

  8. UGUI 代码 动态添加 Event Trigger 的事件

    Additionally, if you need more than just the events provided by default, I'd suggest instead attachi ...

  9. HDU 1398 Square Coins 整数拆分变形 母函数

    欢迎参加——BestCoder周年纪念赛(高质量题目+多重奖励) Square Coins Time Limit: 2000/1000 MS (Java/Others)    Memory Limit ...

  10. neutron DVR

    DVR 简介 DVR 提出的背景 在 Neutron 的网络环境中,跨子网的虚机通信是需要通过 Neutron 的路由器.这既包括不同子网的虚拟机之间的通信,又包括虚拟机与外网之间的通信.在 DVR ...