穴のある自己交差ポリゴンを描画する方法を探しています。HTML Canvas 要素を使用しています。
5 点が与えられたので、下の赤い点を描きたいと思います。
注:線の交点を使用してポイントを追加したくないので、実際に使用するパスは曲線になります。
穴のある自己交差ポリゴンを描画する方法を探しています。HTML Canvas 要素を使用しています。
5 点が与えられたので、下の赤い点を描きたいと思います。
注:線の交点を使用してポイントを追加したくないので、実際に使用するパスは曲線になります。
Canvas 2D では、最初の五角形を単一のパスで描画することはできません。そこで使用されている塗りつぶし規則は偶奇であり、Canvas は非ゼロのワインディング規則で形状を塗りつぶします。
内側の五角形の角の交点を計算し、個別に塗りつぶす必要があると思います。例として使用する描画を実現するには、五角形を (ストローク ラインなしで) 塗りつぶし、内部の五角形を (再びストローク ラインなしで) 塗りつぶしてから、塗りつぶさずに五角形のアウトライン ストロークを描くことができます。
自分で全部描きたくないと思いますよね?http://gpolo.awardspace.info/fill/main.htmlはそれが行われていることを示していますが、それはすべて手作業です。