?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();????}