画布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/

Answer 1

你来自同一个画布对象加载你的背景：

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

使用这个代替：

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

现在唯一让我们想知道的是你为什么是我们两个画布而不是一个？它看起来像你试图覆盖他们，但如果你添加一个边界，你会发现一个在底部，另一个在顶部。

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

我创建了一个新的小提琴使用一个上下文（无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/（注意每个对象的速度属性）