J'essaie de dessiner un contour d'un bâtiment en toile. J'atteins l'effet ci-dessous en créant une série de carrés pour chaque côté, plus le «toit» supérieur, puis en les dessinant en séquence en suivant essentiellement l'algorithme du peintre.Toile HTML5 ne préservant pas l'ordre de dessin
La capture d'écran sur la gauche montre à quoi cela devrait ressembler. C'est peindre chaque carré séparément.
Pour améliorer les performances, je souhaite limiter autant que possible les appels .stroke() et .fill(), donc je fais la queue de tous les appels moveTo() et lineTo() et je les peins en un seul passage. Des tests ont montré que (au moins pour les lignes) cela améliore considérablement les performances et je l'ai vérifié moi-même. Malheureusement, comme vous pouvez le voir sur la bonne capture d'écran, quand je ne peins les bâtiments qu'une seule fois à la fin, la superposition est essentiellement détruite. Il peint les choses dans un ordre apparemment aléatoire.
La toile doit-elle fonctionner de cette façon? Pourquoi ne dessine-t-il pas tout dans l'ordre que je lui ai dit de dessiner comme la première capture d'écran? Quelqu'un connaît-il un bon travail pour ce comportement?
En fait, lorsque vous tracez une boucle avec tout ce qui a le même style, il suffit simplement de savoir si les fonctions .stroke() et .fill() sont à l'intérieur de la boucle ou à l'extérieur. – Nick
Je suppose que je mets toujours le mien au même endroit - probablement à l'extérieur, puisque j'ai tendance à obtenir l'effet que l'OP démontre. – hunterloftis