Javascript 画布Html5：多个画布，清除其中一个看起来也会清除另一个画布

我正在尝试绘制不同的画布元素并独立地清除它们。然而，我的两个不同的上下文似乎影响了两个画布元素，并且没有作为单独的层发挥作用。我希望能够独立地更改不同的画布元素，以创建背景和前景

相关HTML：

<canvas id="canvas" style="position: abosloute; top:0px; left: 0px; z-index: 0;" width="500" height="300"></canvas>
<canvas id="canvas2" style="position: abosloute; top:0px; left: 0px;z-index: 1;" width="500" height="300"></canvas>

相关JavaScript调用：

ctx.clearRect( 0, 0, canvas.width, canvas.height );

它似乎同时清除了

ctx

和

ctx2

。我不明白为什么

下面是一个链接，指向JSFIDLE上的完整代码：

---

您正在从同一画布对象加载上下文：

var ctx = canvas.getContext( "2d" );
var ctx2 = canvas.getContext( "2d" );

改用这个：

var ctx = canvas.getContext( "2d" );
var ctx2 = canvas2.getContext( "2d" );

现在唯一要问的是，为什么要使用两个画布而不是一个？看起来您正试图覆盖它们，但如果添加边框，您会注意到一个在底部，另一个在顶部

您真正想要做的是在绘制其中一个对象之前保存状态，然后恢复到以前的状态

我创建了一个使用一个上下文（无requestAnimationFrame）的新提琴示例：

代码的另一个问题是使用setInterval而不是window.requestAnimationFrame。有关更多信息，请访问：

呃，见鬼，更新了JSFIDLE以使用requestAnimationFrame：

---

（注意每个对象上的speed属性）

var ctx2=canvas.getContext（“2d”）=>
var ctx2=canvas
2
.getContext（“2d”）
var ctx = canvas.getContext( "2d" );
var ctx2 = canvas2.getContext( "2d" );