畫布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/（注意每個對象的速度屬性）