canvas图像放大镜效果

最新推荐文章于 2023-06-08 17:08:54 发布

辣姐什么鬼

最新推荐文章于 2023-06-08 17:08:54 发布

阅读量786

点赞数

分类专栏： web前端文章标签： web前端 canvas

本文链接：https://blog.csdn.net/liona_koukou/article/details/71429764

版权

web前端专栏收录该内容

174 篇文章 6 订阅

订阅专栏

效果图如下：鼠标按下并移动放大镜出现，释放或移出图片外放大镜消失

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #canvas{display:block;border:1px solid #aaa;margin:0 auto;}
        #offCanvas{display:none;margin:0 auto;}
    </style>
</head>
<body>
<canvas id="canvas">您的浏览器不支持canvas</canvas>
<canvas id="offCanvas"></canvas>
<script>
    var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");

    var offCanvas=document.getElementById("offCanvas");
    var offContext=offCanvas.getContext("2d");

    var isMouseDown=false;
    var image=new Image();
    var scale;
    
    window.onload= function () {
        canvas.width=800;
        canvas.height=420;

        image.src="https://file.youche.com/_1200_640/0/car/ddf08f20bfc4e124.jpg?area=1200_0x60";
        image.onload= function () {
            offCanvas.width=image.width;
            offCanvas.height=image.height;
            scale=offCanvas.width/canvas.width;
            context.drawImage(image,0,0,canvas.width,canvas.height);
            offContext.drawImage(image,0,0);
        }
    };
    //鼠标交互
    function windowToCanvas(x,y){//得到鼠标距离画布左边和上边的距离
        var bbox=canvas.getBoundingClientRect();//画布到浏览器的左上右下的距离
        return {x:x-bbox.left,y:y-bbox.top}
    }
    canvas.onmousedown= function (e) {
        e.preventDefault();
        //点击的具体坐标
        var point=windowToCanvas(e.clientX, e.clientY);//e.clientX鼠标的位置
        isMouseDown=true;
        drawCanvasWithMagnifier(true,point);
    };
    canvas.onmousemove= function (e) {//鼠标移动放大镜移动
        e.preventDefault();
        if(isMouseDown){//显示放大镜
            var point=windowToCanvas(e.clientX, e.clientY);
            drawCanvasWithMagnifier(true,point);
        }
    };
    canvas.onmouseup= function (e) {//鼠标抬起放大镜消失
        e.preventDefault();
        isMouseDown=false;
        drawCanvasWithMagnifier(false);
    };
    canvas.onmouseout= function (e) {//鼠标移出canvas放大镜消失
        e.preventDefault();
        isMouseDown=false;
        drawCanvasWithMagnifier(false);
    };
    function drawCanvasWithMagnifier(isShow,point){//画放大镜
        context.clearRect(0,0,canvas.width,canvas.height);//清除画布
        context.drawImage(image,0,0,canvas.width,canvas.height);
        if(isShow){
            drawMagnifier(point);
        }
    }
    function drawMagnifier(point){
        //原理就是一张图在两个canvas里，一张大的一张小的
        //鼠标在小图上操作获得对应在大图的坐标显示大图的相应部分
        //以造成放大镜的效果
        var imageLG_cx=point.x*scale;//对应大图的x坐标
        var imageLG_cy=point.y*scale;

        var mr=100;//半径

        var sx=imageLG_cx-mr;
        var sy=imageLG_cy-mr;

        var dx=point.x-mr;
        var dy=point.y-mr;

        context.save();
        context.lineWidth=10;
        context.strokeStyle="#069";
        context.beginPath();
        context.arc(point.x,point.y,mr,0,Math.PI*2);
        context.stroke();
        context.clip();//剪辑出一个圆形
        context.drawImage(offCanvas,sx,sy,2*mr,2*mr,dx,dy,2*mr,2*mr);
        context.restore();
    }
</script>
</body>
</html>

辣姐什么鬼

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
canvas图像放大镜效果

效果图如下：鼠标按下并移动放大镜出现，释放或移出图片外放大镜消失代码如下： &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&
复制链接

扫一扫