在Firefox中的畫布中繪製線條時的抗鋸齒功能

我正試圖用畫布繪製一個圖表，並且希望獲得清晰的線條而不是抗鋸齒。我知道需要使用0.5的偏移量才能使線條完全落在屏幕像素上，但即使如此，我也會在Firefox中獲得消除鋸齒的線條，而Chrome和IE都能很好地進行渲染。在Firefox中的畫布中繪製線條時的抗鋸齒功能

下面是一些示例代碼：

JS：

var canvas = document.getElementsByTagName('canvas')[0]; 
var ctx = canvas.getContext('2d'); 
canvas.width = 100; 
canvas.height = 100; 

ctx.translate(-0.5, -0.5); //To get crisp lines 
ctx.lineWidth = 1; 
ctx.strokeStyle = 'black'; 
for (var x = 20; x < 100; x += 20){ 
    ctx.moveTo(x, 20); 
    ctx.lineTo(x,100); 
    ctx.stroke(); 
}

見的jsfiddle：http://jsfiddle.net/einaregilsson/9yrF6/8/

這就是它看起來像在Chrome和IE：

Chrome rendered lines

這就是它看起來的樣子柯在Firefox：

Firefox rendered lines

這是使用Firefox 26在Windows 7我試圖關閉硬件加速，其中有人建議，但沒什麼區別。任何想法如何我可以在Firefox上得到清晰的線條？

另外，有沒有人在Firefox上看到小提琴時不會出現反鋸齒行？我想知道這是一個普通的Firefox問題，還是特定於我的設置。

來源

2014-01-20 Einar Egilsson

它看起來像你稍微放大的火狐（注意行是如何進一步隔開略）

命中按Ctrl +重置縮放級別。這應該可以解決你的問題。

來源

2014-01-20 11:18:42

感謝。重置縮放實際上沒有做到這一點，我之前做過。但在閱讀你的答案後，我搜索並找到了這個：https：//support.mozilla.org/en-US/questions/963759其中提到Firefox是尊重我在我的操作系統設置中設置的默認縮放級別，這是125％，所以這就是Ctrl + 0也是默認的。將它改回100％就解決了這個問題。謝謝。 –

或者，如果你想讓你的操作系統縮小到125％，但讓Firefox控制它自己的縮放級別，你可以去about：config並將layout.css.devPixelsPerPx更改爲1.0。默認情況下，它是-1.0，這意味着使用操作系統設置。 –

FirefoxMobile呢？ –

應該在Firefox是太脆，你可能已經在縮小。重置變焦（CTRL + 0）

來源

2014-01-20 11:18:58 ArtBIT

在Firefox中的畫布中繪製線條時的抗鋸齒功能

回答

相關問題