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

以下是工作效果的一个例子：

enter image description here

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

这使得：

enter image description here

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

如果在较小的文本呈现比例下看起来不那么准确，你总是可以将它绘制得很大但是缩小它（在上面的例子中你会做ctx.scale(0.25, 0.25)）

Answer 2

Simon的答案是一个很好的解决方案，但在某些情况下它可能会产生缓解故障，特别是在资本'M'，'V'和＆amp; 'W'：

drawStroked("MVW", 50, 150);

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

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

ctx.miterLimit=2;

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

祝你好运！

Answer 3

对于平滑的阴影，你可以尝试这个

ctx.beginPath();
ctx.fillStyle = 'white';
ctx.font = "bold 9pt Tahoma";
ctx.shadowBlur = 3;
ctx.textAlign = "center";
ctx.shadowColor = "#000000";
ctx.shadowOffs = 0;                 
ctx.fillText('www.ifnotpics.com', 100, 50);        
ctx.closePath();

Answer 4

上面的答案很好，使用了一些解决方案*和我自己的想法，在下面的小提琴中做了快速参考和一些有创意的选择。

*在小提琴代码中的所有应交学分

drawStrokedText   ( text, x, y );
drawShadowedText  ( text, x, y, shadowBlur);
drawGlowingText   ( text, x, y, glowColorHex, glowDistance);
drawBlurredText   ( text, x, y, blurAmount);
drawReflectedText ( text, x, y, reflectionScale, reflectionOpacity);

https://jsfiddle.net/vtmnyea8/

小提琴的输出：

它支持什么：

大纲文字
阴影文字
发光文字
文字模糊
反映文字

一些性能指标：

考虑在游戏中还是以高帧频使用它？使用上述方法签出 jsperf 。

https://jsperf.com/various-text-effects-html5-2d-context

使用HTML5的画布使用外部笔划绘制文本

4 个答案:

小提琴的输出：

它支持什么：

一些性能指标：