Question

我正在尝试绘制不同的画布元素并单独清除它们。然而，我的两个不同的上下文似乎影响两个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

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

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/（注意每个对象的速度属性）

Canvas Html5：多个画布和清除一个画布似乎也清除了其他画布

1 个答案: