Canvas Html5: 多个画布清除其中一个画布时似乎也会清除另一个画布

Question

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

相关的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（用于创建上下文对象）：

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

相关的 JavaScript 调用：

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

看起来它清除了ctx和ctx2。我不明白为什么。

这里是在jsfiddle上完整代码的链接：

http://jsfiddle.net/BvMdx/3/

- Sam

---

var ctx2 = canvas 2 .getContext( "2d" ); => var ctx2 = canvas 2 .getContext("2d"); - Matthew Perron

Answer 1

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

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

请使用以下内容：

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

现在唯一需要思考的问题是，为什么你使用两个画布而不是一个？看起来你试图将它们叠加在一起，但是如果你添加一个边框，你会发现其中一个在底部，另一个在顶部。

你真正想要做的是，在绘制对象之前保存状态，然后恢复到先前的状态。

我创建了一个新的fiddle，其中包含使用一个上下文的示例（没有requestAnimationFrame）：

http://jsfiddle.net/z5vtL/1/

你的代码还有一个问题，就是使用了setInterval而不是window.requestAnimationFrame。你可以在以下链接中找到更多信息：

https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

嗯，该死的，更新了JSFiddle以使用requestAnimationFrame:

http://jsfiddle.net/z5vtL/3/（注意每个对象上的speed属性）

- Mataniko