本文介绍了如何防止画布字体渲染中的丑陋尖峰？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我在画布上绘制文字时，我会得到丑陋的尖峰，如下所示：
在此处尝试：
When I draw text in canvas, I get ugly spikes, like this:
Try it here: http://jsfiddle.net/48m4B/
While for example in photoshop, I get this:
The code is just a classic strokeText:
ctx.font = '20px Arial';
ctx.lineWidth = 15;
ctx.strokeStyle = '#fff';
ctx.strokeText('How to prevent ugly spikes?');
If it isn't possible to fix this, is there any workaround?
解决方案
Try to set line join to:
ctx.lineJoin = 'round';
you can also adjust the miter limit:
ctx.miterLimit = 2;
这篇关于如何防止画布字体渲染中的丑陋尖峰？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！