canvas实现放大镜功能

最新推荐文章于 2023-11-25 23:43:10 发布

草木黄尘

最新推荐文章于 2023-11-25 23:43:10 发布

阅读量4.8k

点赞数 1

分类专栏： HTML5 文章标签： canvas

本文链接：https://blog.csdn.net/qq_24849765/article/details/50917004

版权

HTML5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

采用canvas实现放大镜功能，只需要使用一个方法。。。
先奉上效果图：

先介绍该方法：
drawImage（）
这个方法有三种使用情况：
1、drawImage(img,x,y)
三个参数，第一个参数当然是img元素了，也可以是video元素或者Image对象，x 、y 为图片绘制时在画布中的起始坐标，图像大小与原图相同。
2、drawImage(img , x , y , w , h)
与第一中情况相比，多了两个参数，分别代表所绘图像的宽度和高度。
3、drawImage(img , sx , sy , sw , sh , dx , dy , dw , dh);
9个参数，分别是：图像元素，被复制区域在原画布中的起始横坐标、被复制区域在原画布中的起始纵坐标、被复制区域的宽度、被复制区域的高度、复制后目标图像在画布中的起始横坐标、复制后目标图像在画布中的起始纵坐标、复制后目标图像的宽度、复制后目标图像的高度。
因此这种情况下可以将某幅图像的局部区域复制到另一个画布中的某个位置。
直接来代码了：

<!DOCTYPE html>
<html>
<head>
    <title>index</title>
    <style type="text/css">
    body{
        margin: 0;
        padding: 0;
        position: relative;
    }
    #imgcan{
        display: block;
        cursor: pointer;
    }
    #glasscan{
        display: none;
        border:1px solid #ccc;
        border-radius:101px;
        -webkit-border-radius:101px;
        -o-border-radius:101px;
        -moz-border-radius:101px;
        position: absolute;
    }
    </style>
</head>
<body>
<canvas id="imgcan" width="800" height="500"></canvas>
<canvas id="glasscan" width="200" height="200"></canvas>
<span id="show"></span>
</body>
<script type="text/javascript">
    var imgcan = document.getElementById("imgcan"),
        glasscan = document.getElementById("glasscan"),
        imgContext = imgcan.getContext("2d"),
        glassContext = glasscan.getContext("2d"),
        img = new Image(),
        mouse = captureMouse(imgcan);
    img.src = "1.jpg";
    img.onload = function(){
        imgContext.drawImage(img,0,0);
    }
    //获取元素内鼠标位置
    function captureMouse(element){
        var  mouse = {x:0 , y:0};
        element.addEventListener('mousemove' , function(event){
        var x , y;
        if(event.pageX || event.pageY){
            x = event.pageX;
            y = event.pageY;
        }else{
            x = event.clientX + (document.body.scrollLeft || 
            document.documentElement.scrollLeft);
            y = event.clientY + (document.body.scrollTop || 
            document.documentElement.scrollTop);
        }
        x -= element.offsetLeft;
        y -= element.offsetTop;
        mouse.x = x;
        mouse.y = y;
        } , false)
        return mouse;
    }
    //给画布绑定鼠标移动事件
    imgcan.onmousemove = function(){
            glassContext.clearRect(0,0,glasscan.width,glasscan.height);
            glasscan.style.left = mouse.x + 10 + 'px';
            glasscan.style.top = mouse.y + 10 + 'px';
            glasscan.style.display = "block";
            document.getElementById("show").innerText = mouse.x + '|' + mouse.y;     //显示鼠标位置
            var drawWidth = 50,
                drawHeight = 50;
            glassContext.drawImage(img,mouse.x-drawWidth/4,mouse.y-drawHeight/4,drawWidth,drawHeight,0,0,drawWidth*4,drawHeight*4);     //实现放大镜
    };
    //绑定鼠标移出事件
    imgcan.onmouseout = function(){
            glasscan.style.display = "none";
    }
</script>
</html>