如何清除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

您可以将合成与操作设置'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上尝试一下