如何在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()