html - html画布阴影被应用于一切

Question

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

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

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

score 33 · Accepted Answer

通过使用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)

score 10 · Accepted Answer

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

这就是你要找的：

context.shadowColor = "transparent";

score 6 · Accepted Answer

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

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

// ... do some stuff

ctx.shadowColor = origShadowColor;

score 0 · Accepted Answer

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

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

4 回答 4