如何防止画布字体渲染中的丑陋尖峰？ [英] How to prevent ugly spikes in canvas font rendering?

问题描述

当我在画布上绘制文字时，我会得到丑陋的尖峰，如下所示：

在此处尝试：

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;

Modified working fiddle

这篇关于如何防止画布字体渲染中的丑陋尖峰？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！