var canvasWidth=800; 
 var canvasHeight=600;    
 var canvas=document.getElementById("canvas");    
 var context=canvas.getContext("2d");    
 canvas.width=canvasWidth;    
 canvas.height=canvasHeight;    
 var image=new Image();     
 /*定义剪辑区域*/    
 var clippingRegion={x:300,y:200,r:50};    
 image.src="z.jpg";    
 image.onload=function(e){
         initCanvas();
  }    
  function initCanvas(){       
         draw(image,clippingRegion);    
  }    
  function setClippingRegion(clippingRegion){
          context.beginPath();      
          context.arc(clippingRegion.x,clippingRegion.y,clippingRegion.r,0,Math.PI*2,false);
          context.clip();
   }    
   function draw(image,clippingRegion){       
    /*清除*/       
     context.clearRect(0,0,canvas.width,canvas.height);    
     /*保存*/    
     canvas.save();        
     setClippingRegion(clippingRegion);        
     context.drawImage(image,0,0);         
     /*状态的恢复*/         
     context.restore();    }