画布笔触文字锐利伪影

Question

我正在尝试使用画布笔触文本，并且在使用大笔画线宽时，我注意到某些字母上出现了奇怪的伪影。

该问题有时会出现在同一字母上的不同字体上（但这实际上取决于字体系列/样式）。

该代码段尽可能简单：

(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>

我还链接了它如何在我的浏览器中呈现的图像：

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

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