html 画布阴影应用于所有内容

Question

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

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

有人知道使用后关闭阴影的最佳做法吗？我将 ShadowColor 设置为“rgba(0,0,0,0)”，这是一种无 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

和

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";
}

Answer 5

如果您在新的画布上下文中

console.log(ctx.shadowColor, ctx.shadowBlur)

（未经修改），您可以看到颜色的默认值是

rgba(0, 0, 0, 0)

，模糊的默认值是

0

。

执行

ctx.save()

和

ctx.restore()

也能达到目的，但成本更高，因为它必须为你所做的每次保存保存所有上下文。

所以你做得对，技术上没有更好的方法。