如何在HTML5畫布中製作此形狀？

Question

我很想知道你會如何去創建一個類似於下面這個HTML5 Canvas的形狀。我想，這或多或少是一個裁剪的圈子，但我的需要會使它與衆不同。

http://img826.imageshack.us/img826/5198/98359410.jpg

context.fillStyle = "#000"; 
context.beginPath(); 
context.arc(200,200,100,0,Math.PI*2,true); 
context.closePath(); 
context.fill(); 

我們裁剪鼻屎，我很困惑。任何人都可以幫我一把嗎？謝謝！

Answer 1

context.globalCompositeOperation = 'destination-in'; 

context.fillRect(200, 220, 200, 100); //Or something similar 

destination-in裝置，每MDC：現有畫布含量保持其中兩個新的形狀和現有的帆布內容重疊。其他一切都是透明的。

或者conversly

context.fillRect(200, 220, 200, 100); 

context.globalCompositeOperation = 'source-in'; 

//Draw arc... 

source-in指：新形狀繪製僅其中兩個新的形狀和目的畫布重疊。其他的都是由透明

這兩種方法最終會破壞已經吸引到畫布上的其他內容，如果這是一個問題，使用clip

context.save(); 
context.beginPath(); 

//Draw rectangular path 
context.moveTo(200, 220); 
context.lineTo(400, 220); 
context.lineTo(400, 320); 
context.lineTo(200, 320); 
context.lineTo(200, 220); 

//Use current path as clipping region 
context.clip(); 

//Draw arc... 

//Restore original clipping region, likely the full canvas area 
context.restore()