Dessine un polygone se recoupant sur le canevas HTML

Question

Je cherche un moyen de dessiner un polygone auto-intersectant avec des trous, j'utilise l'élément HTML Canvas.

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

This question is essentially the same thing.

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 incurvés.

Answer 1

Je suis surtout sûr que vous ne voulez pas tout dessiner vous-même, n'est-ce pas? http://gpolo.awardspace.info/fill/main.html montre que c'est fait, mais c'est tout un travail manuel.

Answer 2

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 formes avec la règle d'enroulement non nul.

Je pense que vous aurez besoin de calculer les points d'intersection pour les coins du pentagone intérieur et remplissez-le séparément. Pour réaliser le dessin que vous utilisez comme exemple, vous pouvez remplir le pentagramme (sans lignes de trait), remplir le pentagone interne (encore sans lignes de traits) puis dessiner le contour du pentagone sans le remplir.