js画布堆叠顺序

时间:2016-01-01 04:35:37

标签: javascript canvas z-index

如果这不是初学者问题的正确位置,我道歉 这是我第一次寻求堆栈溢出的帮助,我只是从js开始。 免责声明:我正在尝试从一本书中探索物理实例,并专注于学习画布。我几乎不知道HTML / CSS;只是在画布上玩的基本要素(到目前为止,我已经进行了跳球和碰撞测试等)。

我已按顺序在三个相应的画布中绘制了三个不同颜色的部分重叠方块(红蓝黑),命名为“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有关,但不完全知道所需的语法 感谢您回复特定的代码行(我怀疑它只是一个单行代码)或者是朝着正确的方向推动我。

1 个答案:

答案 0 :(得分:0)

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

溶液:

将第3层更改为第1层,只需写:

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