画布描边文字锋利的文物

Question

我正在尝试使用画布描边文字，并且在使用大笔画线宽时，我注意到某些字母上有一个奇怪的神器。

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

该片段尽可能简单明了：

＆＃13;

＆＃13;

(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);
})();

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我也是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