Chrome中的锯齿画布渲染

Question

我正在使用HTML画布编写一个绘图应用程序。为了使绘制的线条更加平滑，我在每个mousemove事件之后填充一系列二次曲线：

    ctx.beginPath()
    ctx.moveTo(mx1-halfLastWidth*sin(angle), my1-halfLastWidth*cos(angle))
    ctx.quadraticCurveTo(mx1-lastWidth*cos(angle), my1+lastWidth*sin(angle),
      mx1+halfLastWidth*sin(angle), my1+halfLastWidth*cos(angle))
    ctx.quadraticCurveTo(xl+halfMidWidth*sin(angle), yl+halfMidWidth*cos(angle),
      mx2+halfCurrentWidth*sin(angle), my2+halfCurrentWidth*cos(angle))
    ctx.quadraticCurveTo(mx2+currentWidth*cos(angle), my2-currentWidth*sin(angle),
      mx2-halfCurrentWidth*sin(angle), my2-halfCurrentWidth*cos(angle))
    ctx.quadraticCurveTo(xl-halfMidWidth*sin(angle), yl-halfMidWidth*cos(angle),
      mx1-halfLastWidth*sin(angle), my1-halfLastWidth*cos(angle))
    ctx.fill()

完整演示：http://jsfiddle.net/PfzM2/2/（由于这是从一个更大的项目中提取出来的，所以有很多无关的代码）

在Firefox中，这些线条呈现非常平滑，但在Chrome中某些地方似乎“锯齿状”： 发给浏览器的一系列命令和参数是相同的。

如何让Chrome像Firefox一样呈现这些线条？

- user686782

---

在http://jsfiddle.net/上发布一个演示，这样我们就可以测试一下。 - Blender

好的，已发布到 http://jsfiddle.net/PfzM2/2/。 - user686782

在我的Chrome上完美运行：http://i.imgur.com/hN3Hx.png。（我在64位Linux上运行Chrome 21） - Blender

有趣的是，这可能是一个特定于平台的问题。我的原始测试是在 OS X 上使用 Chrome 21 进行的。在 Windows 上看起来好一些，但对于缓慢的笔画仍然会出现：http://i.imgur.com/WLESE.png - user686782

对于非常缓慢的笔画，我确实会得到一些锯齿状边缘，但这似乎与Firefox的渲染一致：http://i.imgur.com/8d2fs.png。这可能是特定于平台的。 - Blender

Answer 1

关于字体渲染，类似的问题已经被问了很多次。这几乎可以确定是同一个根本问题：反锯齿差异来自渲染引擎。Chrome使用Webkit，而FF使用Gecko。Gecko似乎比Webkit更喜欢反锯齿。

把它归结为浏览器问题（就像你通常会对IE做的那样）。

编辑：似乎相反的情况也是已知的。Nick Heer在他的博客中讨论了这个问题：“由于Gecko的更精确（和更方块状）的反锯齿，大多数衬线字体看起来并不好。”可能是平台问题。

- whiskeySteve