如何清除画布元素中的多边形区域？

Question

我已经使用了clearRect函数，但没有看到多边形的等价物。我天真地试着：

ctx.fillStyle = 'transparent'; 
ctx.beginPath(); 
ctx.moveTo(0, 0); 
ctx.lineTo(100,50); 
ctx.lineTo(50, 100); 
ctx.lineTo(0, 90); 
ctx.closePath(); 
ctx.fill(); 

但是，这只是吸引透明区域，并没有什么已经存在的效果。有没有办法清除画布元素内的多边形区域？

Answer 1

您可以使用compositing设置为'destination-out'此操作：

ctx.globalCompositeOperation = 'destination-out'; 
ctx.beginPath(); 
ctx.moveTo(0, 0); 
ctx.lineTo(100,50); 
ctx.lineTo(50, 100); 
ctx.lineTo(0, 90); 
ctx.closePath(); 
ctx.fill(); 

例子：

尝试在jsFiddle