なぜキャンバスはゴーストリングを残していますか？

Question

私はCanvasを試していて、グリッド上に異なる色のトークンを配置し、それらを削除しようとしています。

私は現在、トークン上の白と同じ次元の円を描いてトークンを削除しようとしています。これは、元の円があったところにある "ゴーストリング"（単一ピクセルの輪郭）を残しています。これは、白い円を連続して適用すると消えます。

2中の円は、-1本来描画され、そして全く塗りされています。 3のサークル、-1は1回オーバーパイント、4はサークル、-1は2回オーバーパイントされています。

この現象は、ChromeとFirefox 3.6の両方で発生します。

マイコードが続きます。

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 
    }; 

なぜこのキャンバスはこのゴーストリングを去ってしまいますか？どのように取り除くことができますか？

Answer 1

つまり、アンチエイリアスです。その円の端にあるピクセルは100％未満の不透明度でペイントされています。これはキャンバスにとってユニークではありません。今日、WindowsグラフィックスAPIがアンチエイリアス処理を行う前に作成され、テストされたWindowsアプリケーションは、アンチエイリアス処理を行ったWindowsのバージョンで実行されると幽霊の境界が残っていました。

完全に不透明な白い四角形をペイントするだけで済みます。長方形には曲線のエッジがないので、すべてのピクセルが完全に白く塗られるか、影響を受けません。アンチエイリアスは発生しません。

Answer 2

低解像度で高解像度の画像を表現するとき、エイリアシングとして知られている歪みアーチファクトを最小限に抑える技術は、anti-aliasingのように見えます。描かれるまで円が高解像度であるので、これらの出血効果が得られます。

Answer 3

私はキャンバスを多用していませんが、問題はPhotoshopで発生するのと同じ理由で発生すると思います。

円を描くときには、エッジのギザギザが見えないようにアンチエイリアス処理が必要です。これは、滑らかさを実現するために、変化する度合いに対して半透明である円の周りのピクセルで終わることを意味します。

同じ位置と寸法を使用して円の上にペイントすると、半透明のピクセルが半透明のピクセルの上にペイントされ、元の色に近いピクセルのリングが残りますわずかに軽い）。だからこそ、白い円を描く回数が増えるほど、完全に白いブロックに近づくでしょう。