Javascript HTML5画布更改图像Z索引

我正在创建一个HTML5画布游戏，我遇到了一个问题，有没有办法改变图像分层顺序？类似于普通HTML中的Z索引？我真的无法用语言表达出来，所以我会上传一张现在正在发生的事情的图片

我想要的是灰色部分覆盖画布内的所有其他图像。该范围已经有透明度，所以它应该渲染它背后的任何东西，但我不想渲染灰色部分的东西。有办法吗

---

提前感谢

制作多个图层的一种方法是使用多个画布，并使用CSS定位将它们相互堆叠

如果只想使用一个画布，可以从擦除整个画布开始绘制循环，然后从后向前重新绘制整个场景。当您使用时，您甚至不应该有任何闪烁，因为web浏览器的渲染引擎将处理该问题

---

另一个选择是使用。它允许您使用已绘制的内容遮罩所绘制的内容。当您在上使用模式

destination时，您将只在没有绘制其他内容的像素上绘制。
您可以使用HTML5画布绘制API中的合成来管理此操作


举例说明

您可以将画布附加到元素而不是文档正文，如下所示：

让您的div有一个id，如下所示：

<div id="myDiv1"></div>  

var c = document.createElement("canvas");  
var myCanvas1 = document.getElementById('myDiv1');  
myCanvas1.appendChild(c);  
var d = document.createElement("canvas");  
var myCanvas2 = document.getElementById('myDiv2');  
myCanvas2.appendChild(d);  

然后继续看画布的内容。你终于可以控制了
通过更改相应容器div的z索引，可以通过Javascript进行堆叠。例如，根据上面的设置，您可以在您选择的某个Javascript函数中执行以下Javascript语句，将myCanvas1置于myCanvas2之上：

document.getElementById('myCanvas1').style.zIndex = 3;  

我已经解决了闪烁部分，但我如何分层两张画布？我的意思是，每次鼠标移动时，我都有一个鼠标坐标“监听器”，它能在两个画布上工作吗？@user2673553鼠标监听器只能在顶部画布上工作，所以你需要捕捉那里的所有输入事件。但这并不意味着该事件处理程序不能在任何其他画布上绘制。@user2673553要将类似画布的HTML元素堆叠在一起，请将
position:absolute
添加到它们的CSS样式中。感谢您提供的信息，我昨晚确实在考虑这个问题，我还有最后一个问题。。。顶部的导航栏已经有一个绝对位置，如何使导航栏和画布不重叠？如果我用div包装所有画布，并且只在画布上设置绝对位置，而不设置div，是否可行？@user2673553
position:absolute
总是在下一个非绝对的父对象之后定位自身。所以当你把所有的画布放在一个没有特殊定位的分区中时，它们将定位在该分区中。谢谢你的回答，这是一个很好的来源，尽管我认为Philipp的答案更多的是我想要的。我会把网站放在书签里，以备日后参考。
var c = document.createElement("canvas");  
var myCanvas1 = document.getElementById('myDiv1');  
myCanvas1.appendChild(c);  
var d = document.createElement("canvas");  
var myCanvas2 = document.getElementById('myDiv2');  
myCanvas2.appendChild(d);  

document.getElementById('myCanvas1').style.zIndex = 3;