本文介绍了如何防止画布字体渲染中的丑陋尖峰?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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





在此处尝试:


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

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

10-14 16:32