Html 画布中文本轮廓的刺

我正在使用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”看起来很难看，有人知道如何解决这个问题吗？

如果使用不同的字体，你可能会得到更好的效果

---

或者，您可以仅使用fillText并创建带有“.

的轮廓。这不是因为字体或大小，而是因为笔划路径中的线条是如何连接的

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

context.lineJoin = 'round';

---

此外，如果您喜欢锐角（没有斜接尖刺），请尝试以下方法：

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

---

这就成功了。

这是由于字体大小的原因，请尝试增加字体大小查看前面的Stackoverflow回答：太好了。这很有帮助