html画布阴影被应用于一切答案

【问题标题】：html canvas shadow being applied to everythinghtml画布阴影被应用于一切
【发布时间】：2011-06-06 16:46:51
【问题描述】：

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

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

案例示例：文本也有阴影。我现在正在使用无阿尔法黑色来解决这个问题。 http://flanvas.com/development/flanvas/examples/filters-dropShadowFilter.html

【问题讨论】：

【解决方案1】：

我创建了一个函数，如果需要，我可以调用它来重置阴影。

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

【讨论】：

【解决方案2】：

（编辑：哎呀！我知道这就是你已经用 0 alpha black 做的事情了。）

这就是你要找的：

context.shadowColor = "transparent";

【讨论】：

【解决方案3】：

例如，通过使用save、translate 和restore，您可以执行任务而不必担心样式更改。

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

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

// do some stuff

ctx.restore();

这里的X 和Y 是您打算绘制的坐标，您可以相对于坐标0,0 进行操作。

此方法解决了缓存和恢复以前的样式/值的问题，并且在您使用渐变时也非常有用，因为它们总是相对于原点绘制(0,0)

【讨论】：

好点。这个解决方案在更复杂的情况下非常有效（需要跟踪的东西更少）。
@Livingston Samuel，你知道这对性能有什么影响吗？
使用save 和restore 会影响性能，尤其是在主循环中使用时。如果性能是主要焦点，则使用屏幕外画布进行渲染并将其用作精灵会更好。如果你只想设置变换原点，那么使用setTransform 会更好。

【解决方案4】：

在更改这些“全局”属性的旧值之前存储它并在以后使用此存储值来恢复它通常是一个好主意。示例：

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

// ... do some stuff

ctx.shadowColor = origShadowColor;

【讨论】：