Dessiner un polygone auto intersection sur le HTML Canvas

Question

Je suis à la recherche d'un moyen de dessiner un polygone auto intersection avec des trous, je suis en utilisant l'élément HTML Canvas.

Donc, étant donné 5 points, je veux tirer le rouge ci-dessous.

Cette question est essentiellement la même chose.

Note:. Je ne veux pas le faire en utilisant les intersections ligne et en ajoutant plus de points, les chemins réels que j'utiliserai seront courbes

Answer 1

Vous ne pouvez pas tirer le premier pentagramme avec un seul chemin en toile 2D - la règle de remplissage utilisé il y a pair-impair et toile remplit des formes avec le non-zéro enroulement.

Je pense que vous aurez besoin de calculer les points d'intersection pour les coins de l'intérieur pentagone et le remplir séparément. Pour obtenir le dessin que vous utilisez comme un exemple, vous pouvez remplir le pentagramme (sans lignes de temps), remplir le pentagone interne (encore une fois, sans lignes de temps), puis le tracé de contour pentagone sans remplissage.

Answer 2

Je suis sûr que la plupart du temps vous ne voulez pas dessiner vous-même, avez-vous? http://gpolo.awardspace.info/fill/main.html montre étant fait, mais il est tout le travail manuel.