在Firefox中的Canvas中绘制线条时进行抗锯齿

Question

我正在尝试使用画布绘制图表，并希望获得清晰的线条，而不是消除锯齿。 我知道您需要使用0.5偏移来使线条精确地落在屏幕像素上，但是即使这样，我在Firefox中也会得到抗锯齿的线条，而Chrome和IE都可以使它正常显示。

这是一些示例代码：

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中的样子：

这是在Firefox中的外观：

这是Windows 7上的Firefox26。我尝试关闭硬件加速，有人建议这样做，但这没什么关系。 关于如何在Firefox上获得清晰线条的任何想法吗？

另外，在Firefox上，有没有人在看小提琴时没有得到抗锯齿的线条？ 我想知道这是Firefox的一般问题，还是我的设置特有的问题。

Answer 1

好像您在Firefox上稍微放大了（注意行之间的距离略有间隔）

按Ctrl + 0重置缩放级别。 这应该可以解决您的问题。

Answer 2

在Firefox中也应该很清晰，您可能已经放大了。重置缩放（CTRL + 0）