第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

canvas元素——放大鏡

標(biāo)簽:
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>

點(diǎn)擊查看更多內(nèi)容
2人點(diǎn)贊

若覺(jué)得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消