canvas版放大镜

最新推荐文章于 2024-03-29 17:03:34 发布

小姚学前端

最新推荐文章于 2024-03-29 17:03:34 发布

阅读量182

点赞数 1

分类专栏： canvas 文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/qq_52799985/article/details/134622445

版权

canvas 专栏收录该内容

1 篇文章

订阅专栏

效果预览图

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大镜</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        canvas{
            display: block;
            margin: 0 auto;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas width="960" height="640"></canvas>
</body>
</html>
<script>
let can = document.querySelector('canvas');
let ctx = can.getContext('2d');
let img = new Image();
img.src = './images/3.jpeg';
img.onload = function(){
    ctx.drawImage(img,0,0,can.width,can.height);
}

//鼠标进入canvas
can.onmouseenter = ()=>{
    can.onmousemove=function(ev){
        //清空
        ctx.clearRect(0,0,can.width,can.height);
        //绘画
        ctx.drawImage(img,0,0,can.width,can.height);
        //圆心
       let x = ev.clientX - can.offsetLeft-1;
       let y = ev.clientY - can.offsetTop-1;
        // 只保留老图不重叠的部分其他清空
        ctx.globalCompositeOperation = 'destination-out'
       
        //画圆
        ctx.beginPath();
        ctx.arc(x,y,60,0,2*Math.PI);
        ctx.fill();
        ctx.closePath();
        ctx.globalCompositeOperation = 'destination-over';
        //设置放大镜
        ctx.drawImage(img,x*3-60,y*3-60,120,120,x-60,y-60,180,180)
    }
}
can.onmouseleave = ()=>{
     //清空
     ctx.clearRect(0,0,can.width,can.height);
        //绘画
        ctx.drawImage(img,0,0,can.width,can.height);
}
</script>