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

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;

<强> Modified working fiddle