Javascript 使用 HTML5 的画布绘制带有外笔画的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13627111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drawing text with an outer stroke with HTML5's canvas
提问by ndg
I'm currently using HTML5's canvas to render a number of strings using the fillText method. This works fine, but I'd also like to give each string a 1px black outer stroke. Unfortunately the strokeText function seems to apply an inner stroke. To counter this, I've written a drawStrokedText function that achieves the effect I'm after. Unfortunately it's horrible slow (for obvious reasons).
我目前正在使用 HTML5 的画布通过 fillText 方法呈现一些字符串。这很好用，但我也想给每个字符串一个 1px 的黑色外笔画。不幸的是，strokeText 函数似乎应用了内部笔画。为了解决这个问题，我编写了一个 drawStrokedText 函数来实现我想要的效果。不幸的是，它太慢了（原因很明显）。
Is there a fast, cross-browser way of achieving a 1px outer stroke using native canvas functionality?
是否有使用本机画布功能实现 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);
};
Here's an example of the effect at work:
这是工作效果的示例：
回答by Simon Sarris
What's wrong with stroke? Since half the stroke will be outside of the shape, you can always draw the stroke first with a line width of double what you want. So if you wanted a 4px outer stroke you could do:
中风是怎么回事？由于一半的笔划将在形状之外，您始终可以先绘制笔划，线宽为您想要的两倍。所以如果你想要一个 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);
Which makes:
这使得：
live fiddle here: http://jsfiddle.net/vNWn6/
现场小提琴：http: //jsfiddle.net/vNWn6/
IF that happens to not look as accurate at smaller text rendering scales, you can always draw it large but scale it down (in the above case you'd do ctx.scale(0.25, 0.25))
如果在较小的文本渲染比例下看起来不太准确，您可以随时将其绘制大但按比例缩小（在上述情况下您会这样做ctx.scale(0.25, 0.25)）
回答by Hymanalope
Simon's answer is a good solution, yet it may have mitering glitches in some cases, especially with capital 'M', 'V', & 'W':
西蒙的答案是一个很好的解决方案，但在某些情况下可能会出现斜接故障，尤其是大写字母“M”、“V”和“W”：
drawStroked("MVW", 50, 150);
In this case, it's best to utilize:
在这种情况下，最好使用：
ctx.miterLimit=2;
Best of luck!
祝你好运！
回答by Abaybay De Abaycious
For a smooth shadow you can try this
对于平滑的阴影，你可以试试这个
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();
回答by aaronedmistone
The above answers are great, using some of these solutions* and some of my own ideas, I made a quick reference and some creative alternatives in the below fiddle.
上面的答案很棒，使用其中一些解决方案*和我自己的一些想法，我在下面的小提琴中做了一个快速参考和一些创造性的替代方案。
*All credits given where due in the fiddle code
*在小提琴代码中给出的所有学分
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/
https://jsfiddle.net/vtmnyea8/
Output of the fiddle:
小提琴的输出：
What it supports:
它支持什么：
- Outline text
- Shadow text
- Glowing text
- Blurred text
- Reflected text
- 大纲文本
- 阴影文字
- 发光的文字
- 文字模糊
- 反射文本
Some performance metrics:
一些性能指标：
Considering using this in a game or at high frame rates? Check out this jsperfusing the above methods.
考虑在游戏中或在高帧率下使用它？使用上述方法查看此jsperf。
