画布中文本轮廓的锯齿问题

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”看起来很丑，有没有人有解决方法？

- Edgar

---

由于字体大小的原因，请尝试增加字体大小。 - SeeTheC

请参考此前的Stackoverflow答案：https://dev59.com/TXnZa4cB1Zd3GeqPmicX#19988202 - markE

Answer 1

这并不是字体或字号的问题，而是由于描边路径中线条连接方式不同导致的。

通过改变线条连接方式，尖角就会消失：

context.lineJoin = 'round';

- user1693593

---

太好了。这非常有帮助。 - Edgar

Answer 2

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

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

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

它能够达到效果。

- Jack

Answer 3

如果您使用其他字体，可能会获得更好的结果。

或者，您可以仅使用fillText，并使用阴影创建轮廓线。

- Philipp