Warum verlässt Canvas einen gespenstischen Ring?

Question

Ich experimentiere mit Canvas, platziere Token verschiedener Farben auf einem Gitter und versuche, sie zu entfernen.

Ich versuche gerade, das Token zu entfernen, indem ich einen Kreis mit den exakt gleichen Abmessungen weiß über das Token zeichne. Dies hinterlässt einen "gespenstischen Ring" (Einzelpixelumriss), wo der ursprüngliche Kreis war, der mit aufeinanderfolgenden Anwendungen des weißen Kreises verschwindet.

Der Kreis in 2, wird -1 ursprünglich gezeichnet, und schon gar nicht überstrichen. Der Kreis in 3, -1 wurde einmal übermalt, der Kreis in 4, -1 wurde zweimal übermalt, und so weiter auf 7, -1.

Dieses Verhalten tritt in Chrome und Firefox 3.6

Mein Code folgt.

function placeToken(e) { 
     var click = getClick(e); 

     var gridCord = getGridCord(click); 

     var canvas = e.currentTarget; 
     var ctx = canvas.getContext(CONTEXT_NAME); 

     ctx.fillStyle = color; 
     ctx.strokeStyle = color; //tried with and without this line, no effect 

     x = (gridCord.x * spacing) + (spacing/2); 
     y = (gridCord.y * spacing) + (spacing/2); 


     ctx.beginPath(); 
     ctx.arc(x, y, (spacing - tokenEdge)/2, 0, Math.PI * 2, true); 
     ctx.closePath(); 
     ctx.fill(); 
     ctx.stroke(); //tried with and without this line. Same result 
    }; 

Warum verlässt Leinwand diesen Geisterring und wie kann ich ihn loswerden?

Answer 1

Kurz gesagt, Antialiasing. Die Pixel am Rand dieses Kreises werden mit weniger als 100% Deckkraft gemalt. Dies ist nicht auf Canvas beschränkt. Früher haben Windows-Anwendungen, die vor den Windows-Grafik-APIs geschrieben und getestet wurden, bei der Ausführung von Antialias-Anti-Aliasing-Versionen Geistergrenzen gesetzt.

Sie müssen nur ein vollständig undurchsichtiges weißes Rechteck darüber malen. Da ein Rechteck keine gekrümmten Kanten hat, wird jedes Pixel entweder vollständig weiß oder unbeeinflusst sein - Antialiasing wird nicht möglich sein.

Answer 2

Es sieht wie anti-aliasing aus, die Technik der Minimierung der Verzerrungsartefakte, bekannt als Aliasing, wenn ein hochauflösendes Bild mit einer niedrigeren Auflösung dargestellt wird. Da ein Kreis eine hohe Auflösung hat, bis er gezeichnet wird, erhalten Sie diese Blutungseffekte.

Answer 3

Ich habe nicht viel mit Leinwand durcheinander gebracht, aber ich denke, das Problem tritt aus dem gleichen Grund in Photoshop auf.

Wenn Sie einen Kreis zeichnen, muss er antialiasiert werden, um zu verhindern, dass gezackte Kanten sichtbar werden. Dies bedeutet, dass Sie mit Pixeln rund um den Kreis enden, die in unterschiedlichem Maße halbtransparent sind, um eine Glätte zu erreichen.

Wenn Sie über den Kreis mit der gleichen Position und den gleichen Abmessungen malen, werden im Wesentlichen halbtransparente Pixel über bereits halbtransparente Pixel gemalt, sodass Sie einen Ring von Pixeln erhalten, der der ursprünglichen Farbe ähnelt (aber etwas leichter). Je öfter Sie den weißen Kreis zeichnen, desto näher kommt er einem vollständig weißen Block.