绘制带有尖角的字母形状轮廓时，会出现奇怪的伪影。如何避免它们？

Question

我目前正在使用 HTML5 的画布来使用Impact字体渲染字符串。这工作正常，但笔画似乎从整个文本区域中渗出。有没有什么办法解决这一问题？

代码和渲染可以在这里看到： http: //jsfiddle.net/5uczpa1k/

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.font = "80px Impact";
ctx.strokeStyle = 'black';
ctx.lineWidth = 20;
ctx.fillStyle = 'white';
ctx.strokeText("A TEXT DEMO", 50, 150);
ctx.fillText("A TEXT DEMO", 50, 150);

<canvas id="myCanvas" width="500" height="500"></canvas>

Answer 1

尝试添加miterLimit- 这定义了用于绘制斜接连接的斜接（角）长度与描边宽度之比的限制。当超过限制时，连接将从斜接转换为斜角：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.font = "80px Impact";
ctx.strokeStyle = 'black';
ctx.lineWidth = 20;
ctx.fillStyle = 'white';
ctx.miterLimit = 2;
ctx.strokeText("A TEXT DEMO", 50, 150);
ctx.fillText("A TEXT DEMO", 50, 150);

<canvas id="myCanvas" width="500" height="500"></canvas>