爲什麼Canvas會留下幽靈般的戒指？

我正在試驗Canvas，在網格中放置不同顏色的標記，並嘗試刪除它們。爲什麼Canvas會留下幽靈般的戒指？

我目前正試圖通過在令牌繪製精確的相同尺寸的圓形白色刪除令牌。這會留下原始圓圈的「鬼環」（單像素輪廓），隨着白圈的連續應用而消失。

Ring example

在2圓，-1最初繪製，而不是在所有上述磨削。 3中的圓圈-1已被重疊一次，4中的圓圈-1已被重疊兩次，以此類推至7，-1。

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

爲什麼畫布離開這個幽靈般的戒指，我該如何擺脫它？

來源

2010-12-15 C. Ross

它是由Flash開發人員非常衆所周知，帆布鬧鬼 – Jason 2010-12-15 23:44:24

總之，抗鋸齒。該圓的邊緣上的像素被繪製的不透明度小於100％。這不是畫布所特有的。你只需要畫它。 – 2010-12-15 23:44:29

總之，抗鋸齒。該圓的邊緣上的像素被繪製的不透明度小於100％。這不是畫布所特有的。當天，在Windows圖形API執行抗鋸齒之前編寫和測試的Windows應用程序會在執行抗鋸齒的Windows版本上運行時留下詭異的界限。

你只需要在它畫一個完全不透明的白色矩形。由於矩形不具有彎曲的邊緣，因此每個像素都將完全塗成白色或不受影響 - 您不會得到抗鋸齒。

來源

2010-12-15 23:47:08

實際上，如果矩形繪製在[非像素邊界]上（http://diveintohtml5.org/canvas.html#pixel-madness），您仍然可以看到抗鋸齒問題。將區域劃分爲多個正方形或撫摸時，可能會發生這種情況。 – Phrogz 2010-12-16 18:06:32

它看起來像anti-aliasing，最小化表示以較低的分辨率的高分辨率圖像時被稱爲混疊失真僞影的技術。作爲一個圓圈是高分辨率直到繪製，你會得到這些出血的影響。

來源

2010-12-15 23:46:09 NopOp

我沒有用帆布搞砸了，但我想它確實在Photoshop同樣的原因出現問題。

當你畫一個圓，它必須抗鋸齒，防止鋸齒邊緣從可見。這意味着您最終會在圓周的像素周圍出現不同程度的半透明，以實現平滑。

當您使用相同的位置和尺寸繪製圓的頂部時，它實質上是在已經是半透明的像素之上繪製半透明像素，並留下一圈接近原始顏色的像素（但稍輕）。這就是爲什麼你畫白圈的次數越接近完全白塊。

來源

2010-12-15 23:48:06 simshaun

爲什麼Canvas會留下幽靈般的戒指？

回答

相關問題