我正在尝试使用画布描边文字,并且在使用大笔画线宽时,我注意到某些字母上有一个奇怪的神器。
问题出现在同一个字母上有时会出现不同的字体(但实际上取决于字体系列/样式)。
该片段尽可能简单明了:
(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>
&#13;
我也是linking an image在我的浏览器中呈现的方式:
这是一个常见的东西,我是一个笨拙的家伙,我还没弄明白(如果你充分增加字体大小,它会消失)还是有更多呢?
答案 0 :(得分:3)
将上下文的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