在 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 上查看 Fiddle 时没有看到抗锯齿线？我想知道这是否是 Firefox 的普遍问题，还是我的设置所特有的问题。

Answer 1

看起来您在 Firefox 上稍微放大了（注意线条的间距稍远一些）

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

Answer 2

它在 Firefox 中也应该很清晰，你可能已经放大了。 重置缩放 (CTRL+0)

Answer 3

我在 Debian 上的 Firefox 115 中遇到了类似的问题，当时我在同一路径内以

moveTo

、

lineTo

的顺序画了一堆垂直线，这导致了像下面这样的稍微倾斜的线。虽然它在 Chrome 中正常显示。

但是，如果我将每条线绘制为单独的路径，即每条线的

beginPath

、

moveTo

、

lineTo

、

stroke

，问题就会消失，并且线条会变得更清晰：

（我在截图后放大了图像，以便更好地看到像素。）