如何在里面绘制文本

Question

我正在尝试用“阴影”绘制一些文本（在画布元素上），即文本内部空白和黑色。我想让这个黑色非常“重”，所以我使用了lineWidth，但是我正在获得一个奇怪的效果，你可以在图像中看到（特别是在M上）。

我该怎么办？

我的代码：

 var text = "This is the canvas M";
 var canvas = document.getElementById('c');
 var ctx = canvas.getContext('2d');
 ctx.font = "24px Arial";
 ctx.lineWidth = 4;
 ctx.strokeStyle = "black";
 ctx.strokeText(text, 5, 30);
 ctx.fillStyle = "white";
 ctx.fillText(text, 5, 30);

 <canvas id="c"></div>

Answer 1

这只是Arial字体的问题;）尝试Calibri，问题就会消失！

我从ctx.font = "24px Arial";变成ctx.font = "24px Calibri";的唯一一条线

测试它here。

更新（也修复）：

这也将解决Arial的问题：

 var text = "This is the canvas M";
 var canvas = document.getElementById('c');
 var ctx = canvas.getContext('2d');
 ctx.font = "24px Arial";
 ctx.lineJoin = 'round';     //ADD THIS LINE
 ctx.miterLimit = 2;         //& THIS LINE
 ctx.lineWidth = 4;
 ctx.strokeStyle = "black";
 ctx.strokeText(text, 5, 30);
 ctx.fillStyle = "white";
 ctx.fillText(text, 5, 30);