canvas元素——放大鏡

標簽：

JavaScript

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .wrap {
            width: 400px;
            height: 600px;
            border: 1px solid black;
            position: relative;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <!--创建两个画布-->
        <canvas id="mycanvas" width="400" height="600"></canvas>
        <canvas id="mycanva_s" width="100" height="100" style="position:absolute;border:1px solid black;border-radius: 50%;"></canvas>
    </div>
    <script type="text/javascript">
        var wrap = document.querySelector(".wrap");
        var mycanvas = document.querySelector("#mycanvas");
        var mycanva_s = document.querySelector("#mycanva_s");
        var ctx = mycanvas.getContext("2d");//返回一个用于在画布上绘图的环境
        var ctx1 = mycanva_s.getContext("2d");
        var img = new Image();
        img.src = "img/5.jpg";
        img.onload = function() {
            ctx.drawImage(img, 0, 0, 400, 600);//在画布上绘制图像
            ctx1.drawImage(img, 0, 0, 400, 600);
        }
        var disX;
        var disY;

        wrap.onmousemove = function() {
            mycanva_s.style.display = "block";
            var event = event || window.event;
            disX = event.clientX - mycanva_s.offsetWidth / 2;
            disY = event.clientY - mycanva_s.offsetHeight / 2;
            a = wrap.offsetWidth - mycanva_s.offsetWidth;
            b = wrap.offsetHeight - mycanva_s.offsetHeight;
            if(disX <= 0) {
                disX = 0;
            }
            if(disY <= 0) {
                disY = 0;
            }
            if(disX >= a) {
                disX = a;
            }
            if(disY >= b) {
                disY = b;
            }
            mycanva_s.style.top = disY + "px";
            mycanva_s.style.left = disX + "px";
            console.log(disX + "???" + disY);
            ctx1.drawImage(img, disX * 2.1, disY * 1.65, 50, 50, 0, 0, 100, 100);
        };
        wrap.onmouseout = function() {
            mycanva_s.style.display = "none";
        }
    </script>
</body>

</html>

點擊查看更多內容