如何避免画布字体渲染中的丑陋尖峰？

Question

7

当我在画布上绘制文本时，会出现丑陋的尖刺，就像这样： enter image description here

。您可以在此处尝试： http://jsfiddle.net/48m4B/。

而在Photoshop中，我得到了这样的结果： enter image description here

。代码只是经典的strokeText。

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

如果无法修复这个问题，是否有任何解决方法？

- psycho brm

1

+1 给这个棒极了的尖刺效果... - rodrigo-silveira

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1693593 · Accepted Answer

尝试将线条连接设置为：

ctx.lineJoin = 'round';

你也可以调整斜接限制：

ctx.miterLimit = 2;