canvas画圆,保存和取出重点看不懂不懂,这js能详细解释下么?放大镜效果
<script type="text/javascript">
   window.onload=function(){
       var bigcanvas=document.getElementById("bigcanvas");
       var bigContext=bigcanvas.getContext("2d");
       var mycanvas=document.getElementById("mycanvas");
       var mycanvasContext=mycanvas.getContext("2d");
       var image=new Image();
       image.src="img.jpg";
       image.onload=function(){
           bigContext.drawImage(image,0,0,bigcanvas.width,bigcanvas.height);
           mycanvasContext.drawImage(image,0,0,mycanvas.width,mycanvas.height);
       }
       var mr=100;
       var ismousedown=false;
       mycanvas.onmousedown=function(event){
           ismousedown=true;
           var bbox=mycanvas.getBoundingClientRect();
           var minx=event.clientX-bbox.left;
           var miny=event.clientY-bbox.top;
           //console.log(minx,miny);
           var bigx=minx*3;
           var bigy=miny*3;
           mycanvasContext.clearRect(0,0,mycanvas.width,mycanvas.height);
           mycanvasContext.drawImage(image,0,0,mycanvas.width,mycanvas.height);
           mycanvasContext.drawImage(bigcanvas,bigx-mr,bigy-mr,200,200,minx-mr,miny-mr,200,200);
       }
       mycanvas.onmouseup=function(event){
           ismousedown=false;
           mycanvasContext.clearRect(0,0,mycanvas.width,mycanvas.height);
           mycanvasContext.drawImage(image,0,0,mycanvas.width,mycanvas.height);
       }
       mycanvas.onmouseover=function(event){
           ismousedown=false;
       }
       mycanvas.onmousemove=function(){
           if( ismousedown==true){
           var bbox=mycanvas.getBoundingClientRect();
           var minx=event.clientX-bbox.left;
           var miny=event.clientY-bbox.top;
           //console.log(minx,miny);
           var bigx=minx*3;
           var bigy=miny*3;
           mycanvasContext.clearRect(0,0,mycanvas.width,mycanvas.height);
           mycanvasContext.drawImage(image,0,0,mycanvas.width,mycanvas.height);
           mycanvasContext.drawImage(bigcanvas,bigx-mr,bigy-mr,200,200,minx-mr,miny-mr,200,200);
        }
       }

   }
</script>




1个回答

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问