在画布上添加文本阴影，画布上也有图像
我正在使用画布和 HTML5。我的画布上有一个图标和一个文本，当我尝试使用此代码在文本中添加阴影时：
ctx.shadowColor = textShadowColor;
ctx.shadowBlur = 1;
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 1;
阴影也会出现在我的图像上。可能是什么问题。正如我所看到的，这个阴影颜色出现在画布上，而不是真正出现在文本上。文本和图像应该有不同的画布吗？
提前致谢
I am using the canvas and HTML5. I have an icon in my canvas and a text and when I am trying to add shadow in my Text with this code:
ctx.shadowColor = textShadowColor;
ctx.shadowBlur = 1;
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 1;
the shadow goes also to my image. What could be the problem. As I see this shadowColor goes on the canvas and not really on the text. Should a have different canvas for the text and the image?
Thanks in advance
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
你是先画文字还是先画图像？
如果您先绘制图像，应该没有问题：
http://jsfiddle.net/NAanu/
如果您首先绘制文本，则需要清除阴影，这样图片就不会随之绘制。下面是先用阴影绘制文本的示例：
http://jsfiddle.net/NAanu/1/
我使用保存和恢复来保存和清除上下文中的影子状态。不过，您可以将它们全部设置为默认值。
当您在上下文上设置属性时，您需要将其想象为向画笔加载油漆。
将任何上下文属性（例如
shadowColor）设置为红色就像将红色颜料加载到画笔的边缘一样。从那时起，你画的任何东西都会变成红色。阻止这种情况的唯一方法是清理画笔（将颜色和阴影偏移设置回默认值）或使用
save()和restore()，也就是说“记住我的画笔曾经是透明的，所以以后我可以回忆起这个透明的画笔再次使用”。Are you drawing the text or image first?
If you're drawing the image first there should be no problem:
http://jsfiddle.net/NAanu/
If you're drawing the text first you need to clear the shadow so the picture doesn't get drawn with it also. Here's an example of drawing the text with a shadow first:
http://jsfiddle.net/NAanu/1/
I use save and restore to save and clear the shadow state from the context. You could just set them all to their default values instead, though.
When you set properties on the context you need to think of it like loading up a paintbrush with paint.
Setting any context property, like the
shadowColorto red is like loading red paint onto the edge of your paintbrush. Anything you paint from then on will have red on it.The only way to stop that is to clean your paintbrush (set the color and shadowOffset back to their defaults) or to use
save()andrestore(), which is saying "remember that my paintbrush was once clear, so later I can recall this clear paintbrush to use again".