如何清除畫布元素中的多邊形區域？

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