如何在没有阴影的情况下第二次画文字？

Question

我使用HTML5画布绘制文本。一段时间后，文字会改变颜色。我想保持它的影子不变。但是，如果我多次调用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

使阴影颜色透明而不是“未定义”：

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