html画布阴影被应用于一切

Question

如果你定义了一个阴影ONCE，那么它就会从那里开始应用于画布上的所有“图形”（这就是它应该做的）。

样品： http://flanvas.com/development/flanvas/test.html

有人知道在使用它后关闭阴影的最佳做法吗？我将shadowColor设置为“rgba（0,0,0,0）”，这是一个无alpha黑色。我确信有更好的方法。

案例样本：文本也变成了阴影。我现在正在使用无alpha黑色来对抗它。 http://flanvas.com/development/flanvas/examples/filters-dropShadowFilter.html

Answer 1

通过使用save，translate和restore，您可以执行自己的任务，而无需担心样式更改，例如。

ctx.save();
ctx.translate(X,Y);

ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';

// do some stuff

ctx.restore();

X＆amp; Y是您打算绘制的坐标，并且相对于坐标0,0执行您的工作。

此方法解决了缓存和恢复以前样式/值的问题，在处理渐变时也非常有用，因为它们始终相对于原点(0,0)

进行绘制

Answer 2

（编辑：哎呀！我看到你用0 alpha黑色做的就是这个。）

这就是你要找的东西：

context.shadowColor = "transparent";

Answer 3

在更改之前存储这些“全局”属性的旧值通常是个好主意，并使用此存储值稍后将其还原。例如：

var origShadowColor = ctx.shadowColor;
ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';

// ... do some stuff

ctx.shadowColor = origShadowColor;

Answer 4

我创建了一个函数，可以根据需要调用该函数重置阴影。

resetShadow() {
    this.ctx.shadowOffsetX = 0;
    this.ctx.shadowOffsetY = 0;
    this.ctx.shadowColor = "transparent";
}