在 HTML 画布上绘制一个自相交的多边形答案

【问题标题】：Draw a self intersecting polygon on the HTML Canvas在 HTML 画布上绘制一个自相交的多边形
【发布时间】：2011-01-09 20:58:43
【问题描述】：

我正在寻找一种方法来绘制带孔的自相交多边形，我正在使用 HTML Canvas 元素。

所以给了5分，我想在下面画红色的。

注意：我不想使用线交点和添加更多点来执行此操作，我将使用的实际路径将是弯曲的。

【问题讨论】：

【解决方案1】：

您不能在 Canvas 2D 中使用单一路径绘制第一个五角星 - 那里使用的填充规则是 even-odd 并且 Canvas 使用非零填充形状strong> 缠绕规则。

我认为您需要计算内部五边形角的交点并分别填充。为了实现您用作示例的绘图，您可以填充五角星（没有笔划线），填充内部五边形（同样没有笔划线）然后绘制五边形轮廓笔划而不进行填充。

【讨论】：

【解决方案2】：

我很确定你不想自己画，是吗？ http://gpolo.awardspace.info/fill/main.html 显示它正在完成，但都是手动工作。

【讨论】：