在画布中的文本轮廓的刺

Question

我正在使用html5画布绘制一些文本，但是我得到了一些难看的结果，这是我的示例代码来绘制文本：

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var x = 80;
  var y = 110;

  context.fillStyle = "white"
  context.font = '13px Arial';
  context.lineWidth = 3;
  // stroke color
  context.strokeStyle = 'black';
  context.strokeText('ABCDEFGHIJKLMNOPQRSTUVWXYZ!', x, y);
  context.fillText('ABCDEFGHIJKLMNOPQRSTUVWXYZ!', x, y); 

我得到了这个结果

然后我将文本更改为“abs”并获得此

你可以看到“M”和“s”看起来很难看，有没有人知道如何解决这个问题？

Answer 1

这不是由于字体和大小，而是由于笔画路径中的线条是如何连接的。

通过更改线连接方法，尖峰将消失：

context.lineJoin = 'round';

Answer 2

另外，如果您喜欢尖角（没有尖角尖刺），请尝试：

context.lineJoin = 'miter';
context.miterLimit = 2;

http://jsfiddle.net/hwG42/3/

它可以解决问题。

Answer 3

使用其他字体时，可能会获得更好的效果。

或者，您只能使用fillText并使用shadow创建大纲。