javascript - 如何防止画布字体渲染中出现丑陋的尖峰？

Question

当我在画布中绘制文本时，会出现难看的尖峰，如下所示：

在这里试试：http: //jsfiddle.net/48m4B/

例如在 Photoshop 中，我得到了这个：

代码只是一个经典的strokeText：

ctx.font = '20px Arial';
ctx.lineWidth = 15;
ctx.strokeStyle = '#fff';
ctx.strokeText('How to prevent ugly spikes?');

如果无法解决此问题，是否有任何解决方法？

Answer 1

尝试将线连接设置为：

ctx.lineJoin = 'round';

您还可以调整斜接限制：

ctx.miterLimit = 2;

修改后的工作小提琴