javascript - Canvas 描边文字锐利神器

Question

我正在试验 Canvas 笔划文本，我注意到在使用大笔划线宽时某些字母上出现奇怪的伪像。

问题有时出现在相同字母上的不同字体(但这实际上取决于字体系列/样式)。

代码段尽可能简单明了:

(function() {
    var canvas = document.querySelector('#canvas');
    var ctx = canvas.getContext('2d');
    
    ctx.font = 'bold 110px "Arial"';
    ctx.lineWidth = 26;
    ctx.strokeStyle = '#a4ff11';
    ctx.strokeText('Water', 100, 100);
    
    ctx.fillStyle = '#ff0000';
    ctx.fillText('Water', 100, 100);
})();

<canvas id="canvas" width="800px" height="800px"></canvas>

我也是linking an image它在我的浏览器中的呈现方式:

这是常见的事情吗？我是个笨手笨脚的人，我还没有弄清楚(如果你足够大地增加字体大小，它确实会消失)或者还有更多吗？

Answer 1

将上下文的 lineJoin 属性设置为 bevel 或 round(以您认为最好的为准) 或者将其保持在 miter 并将 miterLimit 属性设置为相当低的值。

(function() {
    var canvas = document.querySelector('#canvas');
    var ctx = canvas.getContext('2d');
    
    ctx.font = 'bold 110px "Arial"';
    ctx.lineWidth = 26;
    ctx.lineJoin = 'miter';
    ctx.miterLimit = 2; // fiddle around until u find the miterLimit that looks best to you.
    // or ctx.lineJoin = 'round';
    // or ctx.lineJoin = 'bevel';
    ctx.strokeStyle = '#a4ff11';
    ctx.strokeText('Water', 100, 100);
    
    ctx.fillStyle = '#ff0000';
    ctx.fillText('Water', 100, 100);
})();

<canvas id="canvas" width="800" height="800"></canvas>

如果您想了解有关 lineJoin 属性的更多信息，那么这是一个很好的起点: https://developer.mozilla.org/de/docs/Web/API/CanvasRenderingContext2D/lineJoin