canvas 放大镜

来源：互联网发布：java中多线程的使用编辑：程序博客网时间：2024/05/21 10:47
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">        .wrap{width: 900px;height: 600px;position: relative;overflow:  hidden;}            #draw{position: absolute;display: none;border-radius: 50%;}        </style>    </head>    <body>        <div class="wrap">                  <canvas id="drawing" width="900" height="600"></canvas>        <canvas id="draw" width="100" height="100"></canvas>        </div>    </body>    <script type="text/javascript">        var wrap=document.querySelector('.wrap');        var drawing=document.querySelector('#drawing');        var draw=document.querySelector('#draw');        var c=drawing.getContext('2d');        var c2=draw.getContext('2d');        var img=new Image();        img.src='img/f8680495dd5c5d41cba6874bc522a2a2.jpg';        img.onload=function () {            img.width=wrap.offsetWidth;            img.height=wrap.offsetHeight;            c.drawImage(img,0,0);            c2.drawImage(img,0,0);//          console.log(wrap.offsetWidth);        }        wrap.addEventListener('mousemove',down,false);        wrap.addEventListener('mouseout',out,false);        function down (){            draw.style.display='block';            wrap.addEventListener('mousemove',move,false);        }        function move () {            var e=window.event||event;            draw.style.left=e.clientX-draw.offsetWidth/2+'px';            draw.style.top=e.clientY-draw.offsetHeight/2+'px';            console.log(e.clientX-draw.offsetWidth);            c2.drawImage(img,(e.clientX-draw.offsetWidth/2)*1.1,(e.clientY-draw.offsetHeight/2)*1.1,100,100,0,0,200,200)        }        function out () {            draw.style.display='none';            drawing.removeEventListener('mousemove',move,false);        }    </script></html>
0 0