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

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

样本：

有人知道在使用阴影后关闭阴影的最佳实践吗？我正在将shadowColor设置为“rgba（0,0,0,0）”，这是一种无阿尔法黑色。我相信有更好的办法

案例示例：文本也有阴影。我现在用无阿尔法黑来对付这个。

---

通常，在更改这些“全局”属性之前，最好先存储这些属性的旧值，然后再使用存储的值进行恢复。例如：

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

// ... do some stuff

ctx.shadowColor = origShadowColor;

---

通过使用

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）

（编辑：Oops！我看到您已经在使用0 alpha黑色时这样做了。）

这就是你一直在寻找的：

context.shadowColor = "transparent";

---

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

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

---

很好。这个解决方案在更复杂的情况下（需要跟踪的事情更少）非常有效。@Livingston Samuel，你知道这对性能有什么影响吗？使用

save

和

restore

会影响性能，尤其是在主循环中使用时。如果性能是主要焦点，那么使用屏幕外画布进行渲染并将其用作精灵会更好。如果只想设置变换原点，那么使用

setTransform

会更好。