在 Firefox 的 Canvas 中绘制线条时的抗锯齿答案

【问题标题】：Antialiasing when drawing lines in Canvas in Firefox在 Firefox 的 Canvas 中绘制线条时的抗锯齿
【发布时间】：2014-01-20 19:18:58
【问题描述】：

我正在尝试使用画布绘制图表，并希望获得清晰的线条，而不是抗锯齿。我知道你需要使用 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 问题，还是我的设置特有的问题。

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

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

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

【讨论】：

谢谢。重置缩放实际上并没有这样做，我以前做过。但是在阅读了您的答案后，我搜索并发现了这一点：support.mozilla.org/en-US/questions/963759 其中提到 Firefox 尊重我在操作系统设置中设置的默认缩放级别，即 125%，所以这也是 Ctrl+0 的默认设置。将其更改回 100% 解决了该问题。谢谢。
或者，如果你想让你的操作系统缩放为 125%，但让 Firefox 控制它自己的缩放级别，你可以转到 about:config 并将 layout.css.devPixelsPerPx 更改为 1.0。默认为 -1.0，表示使用操作系统设置。
FirefoxMobile 怎么样？

【解决方案2】：

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

【讨论】：