HTML5 Canvas更改图像Z-Index

Question

我正在创建一个HTML5 Canvas游戏，我遇到了一个问题，有没有办法改变图像分层顺序？像普通HTML中的Z-Index？我无法真正说出来，所以我会上传一张当前正在发生的事情的图片。

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

提前致谢

Answer 1

您可以使用HTML5 Canvas绘图API中的合成来管理它

http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#compositing

使用示例

http://www.tutorialspoint.com/html5/canvas_composition.htm

Answer 2

制作多个图层的一种方法是使用多个画布并使用CSS定位将它们叠加在一起。

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

另一种选择可能是使用globalCompositeOperation。它允许您使用已绘制的内容屏蔽您绘制的内容。当您使用模式destination-over时，您将只绘制没有绘制其他内容的像素。

Answer 3

您可以将画布附加到元素而不是文档正文，如下所示：
让你的div有一个id，就像这样：

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

然后让另一个具有不同身份的div：

<div id="myDiv2"></div>  

这两个应该是同伴，意味着一个不嵌套在另一个内 现在您可以按照自己喜欢的方式定位它们，并为它们提供您所选择的z-index属性，可以直接在div元素上，也可以在外部引用。 现在你有，说：

<div id="myDiv" style="z-index:1"></div>  
<div id="myDiv2" style="z-index:2"></div>  

如果这些位于彼此之上，那么myDiv2将出现在myDiv1的顶部。 最后，在Javascript中，您可以将canvas元素附加到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-index来通过Javascript进行堆叠。例如，根据上面的设置，您可以在您选择的某个Javascript函数中执行以下Javascript语句，以将myCanvas1放在myCanvas2之上：

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