Firefox strokeText 锯齿状伪影答案

【问题标题】：Firefox strokeText jagged artifactsFirefox strokeText 锯齿状伪影
【发布时间】：2012-06-14 22:15:11
【问题描述】：

在 FF 中的 strokeText() 的画布渲染存在一些问题。每当使用代码绘制轮廓文本时：

canvasCtx.font          = '36px impact';
canvasCtx.strokeStyle   = '#000';
canvasCtx.fillStyle     = '#fff';
canvasCtx.lineWidth     = 4;

canvasCtx.strokeText('DIG IN CEREAL', 20, 20);

Chrome 给了我no artifacts。
FF 给了我锯齿状的artifacts。

基本上这是在画布上呈现，然后使用 toDataUrl() 导出。任何人都知道一种解决方法/为什么锯齿状伪影只会在 FF 中发生？谢谢。

【问题讨论】：

Opera 中也存在伪像，因此我不愿简单地将其报告为任何特定渲染引擎上的错误
最近有人在 Opera 论坛 (my.opera.com/community/forums/…) 上发布了此内容，希望能引起注意。您是否报告过 Mozilla 的错误？
我在 Chrome 中看到了这一点（使用 KineticJS，但我认为问题出在底层画布上），尤其是字母“w”。

标签： javascript firefox text canvas rendering

【解决方案1】：

好吧，我通过节点画布服务器端遇到了这个问题。由于我只在个别情况下使用文本，因此我可以在文本周围剪裁一个矩形，但它可能特定于我的字体。

  x = 10
  y = 10
  @fontSize = 104
  @context.font = 'bold ' + @fontSize + ' Arial'

  @context.save()
  @context.beginPath()
  @context.rect x - @fontSize*.1, y - @fontSize*.68 - @context.lineWidth, @context.measureText(text).width + @fontSize * .2, @fontSize + @context.lineWidth
  @context.clip()
  @context.strokeText text, x, y
  @context.fillText text, x, y
  @context.restore()

所以，这是从 coffeescript 中提取的一个 sn-p，但你应该明白...save, clip, stroke/draw, restore。

你必须玩*.1、*.775等

您实际上可以使矩形的水平部分更大（而不是.1，您可以使用10，而不是.2，使用20），因为您不担心工件和向右。 .775 是我准确剪掉顶部的确切数字

是的，有点像 hack，但它对我来说解决了这个问题。

【讨论】：