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

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();

但这只是绘制了一个透明区域，并且对已经存在的区域没有影响。有没有办法清除canvas元素内的多边形区域？

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

上试用