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 回答