javascript - 我应该如何使用`处理上下文`?

Question

我在这个页面上已经有了三个上下文。我在上下文 2 中有此部分，它为某些文本提供了阴影。但这也给 context2 中的其他所有内容带来了阴影，有没有办法在 context 中隔离东西？或者我应该只为这个文本创建另一个上下文，然后为我想做的下一件事创建另一个上下文？

drawArc(ctx2, 15, 30, "white", 0, 360);
ctx2.fillStyle = "rgb(80,80,80)";
ctx2.font = '24px sans-serif';
ctx2.shadowColor = "gray";
ctx2.shadowOffsetX = 2;
ctx2.shadowOffsetY = 2;
text = 'whateva';
ctx2.fillText(text, 50, 50);

Answer 1

如果您要为特定的临时目的（例如阴影）修改上下文，只需将临时上下文修改包装在 context.save() 和 context.restore() 中。

然后临时上下文更改将自动使用 context.restore();

// save ctx2 in its current state
ctx2.save()

drawArc(ctx2, 15, 30, "white", 0, 360);
ctx2.fillStyle = "rgb(80,80,80)";
ctx2.font = '24px sans-serif';
ctx2.shadowColor = "gray";
ctx2.shadowOffsetX = 2;
ctx2.shadowOffsetY = 2;
text = 'whateva';
ctx2.fillText(text, 50, 50);

// return ctx2 to its pre-modified state
ctx2.restore();

Answer 2

您是否尝试在文本之前绘制所有内容并且在绘制文本之前设置阴影然后绘制文本？