4

我正在使用 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 一样渲染线条？

4

1 回答 1

0

关于字体渲染，各地都提出了类似的问题。几乎可以肯定，这可能是同一个根本问题：渲染引擎​​产生的抗锯齿差异。如您所知，Chrome 使用 Webkit；FF，壁虎。Gecko 似乎比 Webkit 更喜欢抗锯齿。

将其归结为浏览器问题（我认为您通常会使用 IE 的方式）。

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

于 2012-06-15T02:06:34.190 回答