Canvas实现放大镜效果

最新推荐文章于 2024-05-15 19:46:40 发布

Agoni_轩

最新推荐文章于 2024-05-15 19:46:40 发布

阅读量873

点赞数 1

文章标签： canvas js 放大镜 html

本文链接：https://blog.csdn.net/Agoni_lxh/article/details/52963459

版权

引言：大家都在淘宝上买过东西吧，应该都知道鼠标放到照片上时会将图片放大，这就是接下来要写的放大镜效果。

主要思路：其实很简单就是用drawImage这个方法来操作的，两个画布一个将原图绘制上去，另一个给一个定位absolute，随着鼠标的移动来改变它的left和top值来实现画布随着鼠标的移动而移动，并且将绘制原图的画布上用drawImage截取下来的绘制到定位的画布上以实现放大的效果。

HTML没什么好说的最后有源码，主要说一下js部分

1.将画布获取下来并给2d绘制环境，这个也不多说，在画布上先绘制图片，先new一个Image对象然后将图片绘制出来就好（绘制的时候不要绘制的比原图大。）

var wrap = document.querySelector(".wrap")
var imgcanvas = document.querySelector("#imgcanvas");//绘制图片的画布
var imgctx = imgcanvas.getContext('2d');
var movecanvas = document.querySelector("#movecanvas");//可以动的画布
var movectx = movecanvas.getContext('2d');
var img = new Image();
        img.src = 'img/2.jpg'
        img.onload = function() {
            imgctx.drawImage(img, 0, 0, 1000, 800);//绘制图片（我所找的图片为1024*768的）
        }

2.鼠标移动到画布上时让可移动的画布随着鼠标的移动而移动并且判断出边界的情况，（在这我将判断出去的条件多加了一百，是为了让最边上的效果也可以显示出来），并且随着鼠标的移动来重新在画布上绘制图片。

var x = 0,y = 0;
//鼠标移动事件
wrap.onmousemove = function() {
            //获取鼠标的坐标
            var event = event || window.event;
            x = event.pageX;
            y = event.pageY;
            //判断出边界的情况
            if(movecanvas.offsetLeft >= 901) {
                movecanvas.style.left = 900 + 'px'
            } else {
                movecanvas.style.left = (x - 100) + 'px';//让画布随着鼠标移动，减100是让鼠标处于画布的中心点
            }
            if(movecanvas.offsetTop >= 701) {
                movecanvas.style.top = 700 + 'px'
            } else {
                movecanvas.style.top = (y - 100) + 'px';
            }
            //重新绘制图片
            var img1 = new Image();
            img1.src = 'img/2.jpg'
            img1.onload = function() {
                movectx.drawImage(img1, x - 25, y - 45, 100, 100, 0, 0, 300, 300);//实现放大的效果
            }
        }

其中drawImage中的参数是这样的drawImage（截取图片起始点x坐标，截取图片起始点y坐标，要截取的宽度，要截取的高度，绘制图片的起始点x坐标，绘制图片的起始点y坐标，要绘制的宽度，要绘制的高度）

3.鼠标移入进来让移动的画布显示，移出去的时候让画布消失。

wrap.onmouseover = function() {
    movecanvas.style.display = 'block'
        }
wrap.onmouseout = function() {
    movecanvas.style.display = 'none'
        }

效果图：
原图：

做完后的效果图：

源码如下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            .wrap {
                position: relative;
            }

            #movecanvas {
                position: absolute;
                left: 0;
                top: 0;
                border: 1px solid mediumpurple;
                border-radius: 200px;
                display: none;
            }

            #imgcanvas {
                border: 1px solid black;
                cursor: pointer;
            }

            .wrap {
                width: 1000px;
                height: 800px;
            }
        </style>
    </head>

    <body>
        <div class="wrap">
            <canvas id="imgcanvas" width="1000" height="800"></canvas>
            <canvas id="movecanvas" width="200" height="200"></canvas>
        </div>

    </body>
    <script type="text/javascript">
        var wrap = document.querySelector(".wrap")
        var imgcanvas = document.querySelector("#imgcanvas");
        var imgctx = imgcanvas.getContext('2d');
        var movecanvas = document.querySelector("#movecanvas");
        var movectx = movecanvas.getContext('2d');
        var img = new Image();
        img.src = 'img/2.jpg'
        img.onload = function() {
            imgctx.drawImage(img, 0, 0, 1000, 800);
        }
        var x = 0,
            y = 0;
        wrap.onmousemove = function() {
            console.log(movecanvas.offsetTop)
            var event = event || window.event;
            x = event.pageX;
            y = event.pageY;
            if(movecanvas.offsetLeft >= 901) {
                movecanvas.style.left = 900 + 'px'
            } else {
                movecanvas.style.left = (x - 100) + 'px';
            }
            if(movecanvas.offsetTop >= 701) {
                movecanvas.style.top = 700 + 'px'
            } else {
                movecanvas.style.top = (y - 100) + 'px';
            }
            var img1 = new Image();
            img1.src = 'img/2.jpg'
            img1.onload = function() {
                movectx.drawImage(img1, x - 25, y - 45, 100, 100, 0, 0, 300, 300);
            }
        }
        wrap.onmouseover = function() {
            movecanvas.style.display = 'block'
        }
        wrap.onmouseout = function() {
            movecanvas.style.display = 'none'
        }
    </script>

</html>

这个做的还不是很完美，但是原理就是这样，希望能对大家有帮助。

Agoni_轩

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Canvas实现放大镜效果

引言：大家都在淘宝上买过东西吧，应该都知道鼠标放到照片上时会将图片放大，这就是接下来要写的放大镜效果。主要思路：其实很简单就是用drawImage这个方法来操作的，两个画布一个将原图绘制上去，另一个给一个定位absolute，随着鼠标的移动来改变它的left和top值来实现画布随着鼠标的移动而移动，并且将绘制原图的画布上用drawImage截取下来的绘制到定位的画布上以实现放大的效果。HTML没什么
复制链接

扫一扫