使用 HTML5 的 canvas 绘制带有外描边的文本

Question

我目前正在使用 HTML5 的画布使用 fillText 方法呈现多个字符串。这很好用，但我还想给每个字符串一个 1px 的黑色外描边。不幸的是， strokeText 函数似乎应用了一个内部笔划。为了解决这个问题，我编写了一个 drawStrokedText 函数来实现我想要的效果。不幸的是它太慢了（原因很明显）。

是否有一种快速、跨浏览器的方式来使用本机画布功能实现 1px 的外部笔划？

 drawStrokedText = function(context, text, x, y)
{
    context.fillStyle = "rgb(0,0,0)";
    context.fillText(text, x-1, y-1);
    context.fillText(text, x+1, y-1);
    context.fillText(text, x-1, y);
    context.fillText(text, x+1, y);
    context.fillText(text, x-1, y+1);
    context.fillText(text, x+1, y+1);

    context.fillStyle = "rgb(255,255,255)";
    context.fillText(text, x, y);
};

这是工作效果的示例：

原文由 ndg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

中风怎么了？由于一半的笔划会在形状之外，因此您始终可以先绘制笔划，线宽是您想要的两倍。所以如果你想要一个 4px 的外部描边，你可以这样做：

 function drawStroked(text, x, y) {
    ctx.font = '80px Sans-serif';
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 8;
    ctx.strokeText(text, x, y);
    ctx.fillStyle = 'white';
    ctx.fillText(text, x, y);
}

drawStroked("37°", 50, 150);

这使得：

现场小提琴： http://jsfiddle.net/vNWn6/

---

如果碰巧在较小的文本渲染比例下看起来不那么准确，你总是可以把它画大但按比例缩小（在上面的情况下你会做 ctx.scale(0.25, 0.25) ）

原文由 Simon Sarris 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

西蒙的回答是一个很好的解决方案，但在某些情况下可能会出现斜接故障，尤其是大写的“M”、“V”和“W”：

 drawStroked("MVW", 50, 150);

http://jsfiddle.net/hwG42/1/

在这种情况下，最好使用：

 ctx.miterLimit=2;

http://jsfiddle.net/hwG42/3/

祝你好运！

原文由 Jack 发布，翻译遵循 CC BY-SA 4.0 许可协议