HTML5画布的文本阴影等效实现方式是什么？

Question

我正在尝试使用HTML5的canvas创建与CSS的text-shadow相同的效果。

我可以使用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的canvas，描边太细，而且阴影不允许我指定多个，不像text-shadow。

有人想到了如何实现吗？

- Troy Payne

---

你尝试过哪些画布代码？ - Jukka K. Korpela

请与我们分享您迄今使用的代码，以便我们可以查看问题。 - user1693593

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

- markE

---

虽然这很有帮助，但也有点误导。请参见此处：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowBlur - Andrew

你不需要描绘文本，只需填充它。 - Andrew

Answer 2

你说描边太细了，尝试增加上下文的lineWidth属性了吗？我认为值为4，并带有阴影，可以与你的图片相匹配。

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

- Alexander O'Mara

---

所以我将lineWidth设置为4，它非常接近，但我不知道该给它什么阴影。这是我的代码：context.fillStyle = 'white'; context.strokeStyle = 'black'; context.lineWidth = 4; var fontSize = (canvas.height / 8); context.font = fontSize + 'px Impact'; context.textAlign = 'center'; - Troy Payne