HTML5画布文本阴影等效?

时间:2014-01-03 17:42:56

标签: javascript html css html5 canvas

我正在尝试使用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;

创建如下所示的字符:

http://i.imgur.com/LBZKxL9.png

但是对于HTML5的画布,笔划太细,阴影不允许我指定多个,不像文本阴影。

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

2 个答案:

答案 0 :(得分:8)

将阴影应用于文本(或任何绘图)的html canvas命令为context.shadowBlur

enter image description here

这是您的阴影文字效果的起点:

确保在抚摸后填写文本,否则阴影会侵入填充。

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

答案 1 :(得分:1)

你说中风太薄了,你试过增加上下文的lineWidth属性吗?我认为带阴影的值为4将是匹配图像的合适值。

要在HTML5画布中绘制多个阴影,您可以在同一个地方多次绘制元素,每次都有不同的阴影。