canvas画圆，保存和取出重点看不懂不懂，这js能详细解释下么？放大镜效果

Question

<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>

Answer 1

就是基本的canvas对象操作而已，
getBoundingClientRect
canvas getContext对象方法和属性详细介绍