html - Canvas 中文字轮廓的刺

Question

我正在使用 html5 canvas 绘制一些文本，但我得到了一些丑陋的结果，这是我绘制文本的示例代码:

  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

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

通过改变 line-join 方法，尖峰将消失:

context.lineJoin = 'round';