1

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

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

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

Chrome 没有给我任何文物。
FF 给了我锯齿状的文物。

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

4

1 回答 1

0

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

  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()

所以，这是从咖啡脚本中摘录的片段，但你应该明白save, clip, stroke/draw, restore......

你将不得不玩*.1, *.775, 等等

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

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

于 2015-02-02T14:52:27.753 回答