Desenhe um polígono de se cruzar na tela HTML

Question

Estou procurando uma maneira de desenhar um polígono que se cruze com buracos, estou usando o elemento HTML Canvas.

Então, com 5 pontos, quero desenhar o vermelho abaixo.

Esta questão é essencialmente a mesma coisa.

Nota: Não quero fazer isso usando cruzamentos de linha e adicionar mais pontos, os caminhos reais que usarei serão curvos.

Answer 1

Você não pode desenhar o primeiro pentagrama com um único caminho no Canvas 2D - a regra de preenchimento que está sendo usada, existe par ou ímpar e a tela preenche formas com o diferente de zero regra de enrolamento.

Eu acho que você precisará calcular os pontos de interseção para os cantos do Pentágono Interior e preenchê -lo separadamente. Para alcançar o desenho que você usa como exemplo, você pode preencher o pentagrama (sem linhas de curso), preencha o Pentágono interno (novamente sem linhas de AVC), em seguida, desenhe o traço do contorno do Pentágono sem encher.

Answer 2

Tenho certeza de que você não quer desenhar tudo sozinho, não é? http://gpolo.awardspace.info/fill/main.html mostra que está sendo feito, mas é tudo um trabalho manual.