javascript - Canvas Html5 : multiple canvases and clearing one appears to clear the other canvas as well

Question

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

相关的 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/

Answer 1

您正在从同一个 Canvas 对象加载您的上下文:

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

改用这个:

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

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

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

我创建了一个新的 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/ (注意每个对象的速度属性)