如何在画布元素中清除一个多边形区域？

Question

如何在画布元素中清除一个多边形区域？

3

我使用了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();

但这只是绘制了一个透明区域，并没有对已经存在的内容产生影响。有没有一种方法可以清除画布元素内部的多边形区域？

- patorjk

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jonas · Accepted Answer

您可以使用合成操作，将其设置为'destination-out'，以实现此目的：compositing

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上试试吧。