HTML5画布文本阴影等效？

Question

我正在尝试使用 HTML5 的画布创建可以在 css 的文本阴影中创建的相同效果。

我可以用 CSS 做到这一点：

font: 36px Impact;
text-shadow: 2px 2px 2px #000,
            -2px -2px 2px #000,
             2px -2px 2px #000,
            -2px 2px 2px #000,
             2px -2px 2px #000,
             2px 2px 2px #000,
            -2px -2px 0 #000,
             2px -2px 0 #000,
            -2px 2px 0 #000,
             2px -2px 0 #000;

这会创建如下所示的字符：

但是使用 HTML5 的画布，描边太细了，阴影不允许我指定多个，这与 text-shadow 不同。

有没有人想出如何做到这一点？

Answer 1

将阴影应用于文本（或任何绘图）的 html canvas 命令是 context.shadowBlur

这里是阴影文本效果的起点：

确保在描边后填充文本，否则阴影会侵入填充。

ctx.font="75px verdana";
ctx.shadowColor="black";
ctx.shadowBlur=7;
ctx.lineWidth=5;
ctx.strokeText("HELLO",25,100);
ctx.shadowBlur=0;
ctx.fillStyle="white";
ctx.fillText("HELLO",25,100);

Answer 2

你说笔画太细了，你有没有尝试增加上下文的 lineWidth 属性？我认为带有阴影的 4 值将是与您的图像相匹配的合适值。

要在 HTML5 画布中绘制多个阴影，您可以在同一位置多次绘制元素，每次使用不同的阴影。