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的画布时,笔划太细,阴影不允许我指定多个,不像文本阴影.

有没有人想出如何实现这一目标？

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 画布中绘制多个阴影，您可以在同一位置多次绘制该元素，每次使用不同的阴影。