在上面也有图像的画布上添加文本阴影

Question

我正在使用画布和 HTML5。我的画布中有一个图标和一个文本，当我尝试使用此代码在我的文本中添加阴影时：

    ctx.shadowColor = textShadowColor;
    ctx.shadowBlur = 1;
    ctx.shadowOffsetX = 1;
    ctx.shadowOffsetY = 1;

阴影也出现在我的图像上。可能是什么问题呢。正如我所看到的，这个 shadowColor 出现在画布上，而不是真正出现在文本上。文本和图像应该有不同的画布吗？

提前致谢

Answer 1

你是先画文字还是先画图？

如果你先画图应该没问题：

http://jsfiddle.net/NAanu/

如果您先绘制文本，则需要清除阴影，这样图片就不会被它绘制。下面是一个先用阴影绘制文本的例子：

http://jsfiddle.net/NAanu/1/

我使用保存和恢复来保存和清除上下文中的影子状态。不过，您可以将它们全部设置为默认值。

---

当你在上下文中设置属性时，你需要把它想象成用油漆加载画笔。

将任何上下文属性（如shadowColor）设置为红色就像将红色颜料加载到画笔的边缘。从那时起，你画的任何东西都会变成红色。

阻止这种情况的唯一方法是清洁画笔（将颜色和阴影偏移设置回默认值）或使用save() 和restore()，意思是“记住我的画笔曾经是干净的，所以稍后我记得这个清晰的画笔可以再次使用”。