Question

我在这个页面上已经有三个上下文了。我在这里从上下文2中得到了这一部分，它为某些文本提供了阴影。但它也为context2中的其他一切提供了一个阴影，有没有办法隔离上下文中的东西？或者我应该只为这个文本创建另一个上下文，还有另一个我想做的事情？

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

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

我应该如何使用`<canvas>`？</canvas>来处理上下文

2 个答案: