Pourquoi Canvas laisse-t-il un anneau fantomatique?

Question

J'expérimente Canvas en plaçant des jetons de différentes couleurs sur une grille et en essayant de les retirer.

J'essaie actuellement de supprimer le jeton en dessinant un cercle de mêmes dimensions en blanc sur le jeton. Cela laisse un "anneau fantomatique" (contour de pixel unique) où se trouvait le cercle original, qui disparaît avec les applications successives du cercle blanc.

Le cercle 2, -1 est à l'origine tirée, et pas du tout repeintes. Le cercle en 3, -1 a été repeint une fois, le cercle en 4, -1 a été repeint deux fois, et ainsi de suite à 7, -1.

Ce problème se produit dans Chrome et Firefox 3.6

Mon code suit. Pourquoi la toile quitte-t-elle cette bague fantomatique et comment puis-je m'en débarrasser?

Answer 1

En résumé, antialiasing. Les pixels sur le bord de ce cercle sont peints avec moins de 100% d'opacité. Ce n'est pas unique à la toile. À l'époque, les applications Windows écrites et testées avant que les API graphiques Windows n'effectuent l'anti-crénelage laissaient des limites fantomatiques lorsqu'elles étaient exécutées sur des versions de Windows qui effectuaient l'anti-crénelage.

Il suffit de peindre un rectangle blanc complètement opaque. Comme un rectangle n'a pas de bords incurvés, chaque pixel sera entièrement peint en blanc ou non affecté - vous n'obtiendrez pas d'anti-crénelage.

Answer 2

Il ressemble à anti-aliasing, la technique de minimisation des artefacts de distorsion connus sous le nom d'alias lors de la représentation d'une image haute résolution à une résolution inférieure. Comme un cercle est à haute résolution jusqu'à ce qu'il soit dessiné, vous obtiendrez ces effets de saignement.

Answer 3

Je n'ai pas beaucoup fait de toile, mais je pense que le problème se produit pour la même raison que dans Photoshop. Lorsque vous dessinez un cercle, il doit être anti-crénelé pour éviter que les bords dentelés ne soient visibles. Cela signifie que vous vous retrouvez avec des pixels tout autour du cercle qui sont semi-transparents à des degrés divers, afin d'obtenir la douceur. Lorsque vous peignez le dessus du cercle en utilisant la même position et les mêmes dimensions, il peint essentiellement des pixels semi-transparents sur des pixels déjà semi-transparents, vous laissant avec un anneau de pixels proche de la couleur d'origine (mais légèrement plus léger). C'est pourquoi plus vous dessinez le cercle blanc plus il se rapproche d'un bloc entièrement blanc.