在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上的Firefox 26.我尝试关闭硬件加速，有人建议，但这没有任何区别。我有什么想法可以在Firefox上获得清晰的界限？

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

Answer 1

看起来你在Firefox上略微放大了（请注意线条间距稍微分开）

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

Answer 2

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