我正在尝试使用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的画布,笔划太细,阴影不允许我指定多个,不像文本阴影。
有没有人想出如何做到这一点?
答案 0 :(得分:8)
将阴影应用于文本(或任何绘图)的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);
答案 1 :(得分:1)
你说中风太薄了,你试过增加上下文的lineWidth属性吗?我认为带阴影的值为4将是匹配图像的合适值。
要在HTML5画布中绘制多个阴影,您可以在同一个地方多次绘制元素,每次都有不同的阴影。