Question

在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中发生？感谢。

Answer 1

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

  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的片段，但你应该明白这个想法...... save, clip, stroke/draw, restore。

您必须使用*.1，*.775等

你实际上可以使矩形的水平部分更大（而不是.1，你可以使用10而不是.2，使用20），因为你并不担心过去和过去的文物。 .775是我准确删除

顶部的确切数字

所以，有点像黑客，但它解决了我的问题。

Firefox strokeText参差不齐的文物

1 个答案: