javascript - js Canvas 堆叠顺序

Question

如果这不是初学者问题的正确位置，我深表歉意这是我第一次寻求有关堆栈溢出的帮助，我只是从 js 开始。免责声明:我正在尝试从书中探索物理示例，并且只专注于了解 Canvas 。我对 HTML/CSS 几乎一无所知；只是在 Canvas 上玩耍的基本要素(到目前为止，我已经进行了球跳跃和碰撞测试等)。

我在三个相应的 Canvas 中绘制了三个部分重叠的不同颜色(红蓝黑)的正方形，命名为“layer1”“layer2”“layer3”，我可以看到它们按照预期的堆叠顺序堆积:红色上面蓝色上面黑色。

我已经设置了一个 keydown 事件监听器，并尝试使用 switch 来更改堆叠顺序，但没有成功。

function moveLayers(evt) {
    switch(evt.keyCode) {
      case 37: // up arrow
      // what code should go here to change the order of layer1 and layer3 
    break;
    }
}

是的，我发现它与 z-indez 有关，但不确切知道所需的语法感谢您回复特定的代码行(我怀疑这只是一行代码)或将我推向正确的方向。

Answer 1

我知道它应该只有一行!在 Style zIndex Property 中找到 http://www.w3schools.com/jsref/prop_style_zindex.asp

解决方案:

要将第 3 层更改为第 1 层，只需编写:

document.getElementById("layer3").style.zIndex = "1";