canvas 放大镜

最新推荐文章于 2021-03-14 00:10:36 发布

Joke丿而已

最新推荐文章于 2021-03-14 00:10:36 发布

阅读量382

点赞数 1

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

本文链接：https://blog.csdn.net/xiaoquan1224/article/details/52953216

版权

canvas 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

采用canvas实现放大镜功能，只需要使用一个方法。。。

这个方法有三种使用情况：
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>
        <meta charset="UTF-8">
        <title>cavas放大镜</title>
        <style type="text/css">
            .wrap {width: 1000px; height: 650px; border: 1px solid black; margin: auto; position: relative; overflow: hidden;}
            #canvas {border: 1px solid black; border-radius: 50%; position: absolute; display: none;}
            #myCanvascanvas {border: 1px solid black;}
        </style>
    </head>
    <body>
        <div class="wrap">
            <canvas id="myCanvas" width="" height=""></canvas>
            <canvas id="canvas" width="150" height="150"></canvas>
        </div>
    </body>
    <script type="text/javascript">
        var wrap = document.querySelector('.wrap');
        var imgCanvas = document.querySelector('#myCanvas');
        var canvas = document.querySelector('#canvas');
        var context = imgCanvas.getContext('2d');
        var con = canvas.getContext('2d');//设置绘制环境
        imgCanvas.width = wrap.offsetWidth; //画布宽度
        imgCanvas.height = wrap.offsetHeight;//画布高度
        var img = new Image();//定义一个img对象
        img.src = 'img/7a79e1edab64034f924b368eafc379310b551d32.jpg';

        //图片加载事件
        img.onload = function(){
            img.width= imgCanvas.width;
            img.height= imgCanvas.height;
            context.drawImage(img,0,0);
            con.drawImage(img,0,0);

        }

        //鼠标移入事件
        wrap.addEventListener('mouseover',down,false);
        //鼠标移除出事件
        wrap.addEventListener('mouseout',up,false);

        function down(){
            canvas.style.display = 'block';
            //鼠标移动事件
            wrap.addEventListener('mousemove',move,false);
        }

        function move(){
            var ev = window.event || event;
            //使鼠标显示在画布的中间
            var newX = ev.clientX - canvas.width/2 - wrap.offsetLeft;
            var newY = ev.clientY - canvas.height/2 - wrap.offsetTop;
            canvas.style.top = newY + 'px';
            canvas.style.left = newX + 'px';    
            con.drawImage(img,newX + 40, newY + 40, 150,150,0,0,300,300);
        }
        function up(){
            canvas.style.display = 'none';
            //移除鼠标移动事件
            imgCanvas.removeEventListener('mousemove',move,false);
        }

    </script>
</html>

Joke丿而已

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 放大镜

采用canvas实现放大镜功能，只需要使用一个方法。。。这个方法有三种使用情况： 1、drawImage(img,x,y) 三个参数，第一个参数当然是img元素了，也可以是video元素或者Image对象，x 、y 为图片绘制时在画布中的起始坐标，图像大小与原图相同。 2、drawImage(img , x , y , w , h) 与第一中情况相比，多了两个参数，分别代表所绘图像的
复制链接

扫一扫

专栏目录