如何在没有阴影的情况下第二次绘制文本？

Question

我用HTML5canvas画文字。文本会在一段时间后改变颜色。我想保持它的影子不变。但是如果我多次调用 fillText() ，透明阴影就会被一次又一次地绘制出来，结果我有深色阴影：

我已经尝试根据阴影属性分配 undefined 值，但没有帮助：

ctx.shadowColor = "rgba(0, 0, 255, 0.9)";
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 30;

var text = 'Sample text with shadow';
ctx.fillText(text,0,100); // the shadow is drawn first time

ctx.shadowColor = undefined;
ctx.shadowOffsetX = undefined;
ctx.shadowOffsetY = undefined;
ctx.shadowBlur = undefined;
... // color text is changed here etc.
ctx.fillText(text,0,100); // the shadow is drawn several times
ctx.fillText(text,0,100);
ctx.fillText(text,0,100);

见the demo。

我该如何解决？

Answer 1

使阴影颜色透明而不是'undefined':

ctx.shadowColor = 'transparent';  // or any zero-alpha color
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 0;

如何在没有阴影的情况下第二次绘制文本？

How to draw text second time without shadow?

html

canvas

html5-canvas