使用HTML5 Canvas API中的clip()方法裁剪區域圖像_html5教程技巧

使用Canvas繪製圖像的時候，我們經常想要只保留圖像的一部分，這是我們可以使用canvas API再帶的圖像裁剪功能來實現這一想法。
Canvas API的影像裁切功能是指，在畫布內使用路徑，只繪製該路徑內所包含區域的影像，不會只路徑外的影像。這有點像Flash中的圖層遮罩。

使用圖形上下文的不含參數的clip()方法來實作Canvas的影像裁切功能。此方法使用路徑來對Canvas話不設定一個裁剪區域。因此，必須先建立好路徑。建立完整後，呼叫clip()方法來設定裁切區域。
要注意的是裁剪是對畫布進行的，裁切後的畫布不能恢復到原來的大小，也就是說畫布是越切越小的，要想保證最後仍然能在canvas最初定義的大小下繪圖需要注意save()和restore()。畫布是先裁完了再進行繪圖。不一定要是圖片，路徑也可以放進去~

先來看看一個簡單的Demo。

JavaScript Code複製內容到剪貼簿

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.        
7.   
8.   
9. "canvas-warp">   
10.     "canvas">   
11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
12.        

  

  

<script>   </script>

    window.onload = function(){   

        var canvas = document.getElementById(">        canvas.width = 800;   

        canvas.height = 600;   

        

var

 context = canvas.getContext("21>"29>        context.fillStyle = "#FFF";   

;            context.fillRect(0,0,800,600);   

  

        

//在螢幕上繪製一個大方塊

           context.fillStyle = 

"black"

;    ;   

        context.fillRect(10,10,200,200);   

        context.save();   

        context.beginPath();   

  

        //裁切畫布從(0，0)點至(50，50)的正方形   

        context.rect(0,0,50,50);   

        context.clip();   

  

        //紅色圓   

        context.beginPath();   

        context.strokeStyle = "red";   

;   

        context.lineWidth = 5;            context.arc(100,100,100,0,Math.PI * 2,

false

false

        //整合

  

        context.stroke();   

        context.closePath();   

  

        context.restore();      

        //再裁切整個畫布

  

        context.beginPath();   

        context.rect(0,0,500,500);   

        context.clip();      

        //繪製一條沒有裁切的藍線

           context.beginPath();   

        context.strokeStyle = "blue";    ;   

        context.lineWidth = 5;   

        context.arc(100,100,50,0,Math.PI * 2,false);

        

//整合   

        context.stroke();   

        context.closePath();   

    };