使用 z-index 分层画布的问题

Question

我在这里查看了许多 canvas z-index 帖子，包括：

HTML5 Canvas layer issue
Multi Layer Canvas HTML5
html5 - canvas element - Multiple layers

但我找不到问题的答案。

我试图简单地将一个 canvas 直接放在另一个 canvas 后面。当用户点击 canvas 时，它会改变堆叠顺序。但是 canvases 不是彼此在前后，而是可以看到它们，一个在上面，一个在下面（而不是在它后面）（参见 https://imgur.com/a/BcUNy）。

HTML 和 CSS:

<div id="preview" style="visibility:hidden;">
  <canvas id="cOriginal" width="2" height="1" onclick="clickCompare()" style="position:relative; z-index:2; border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060;"></canvas>
  <canvas id="cPreview" width="2" height="1" onclick="clickCompare()" style="position:relative; z-index:1; border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060;"></canvas>    
  <canvas id="cSave" width="2" height="1" style="position:relative; z-index:0; border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060;"></canvas>
</div>

非常感谢！

编辑：更新我的问题以显示当前问题。

HTML:

<div id="preview" style="visibility:hidden; position:relative;">
  <canvas id="cOriginal" width="2" height="1" onclick="clickCompare()" style="position:absolute; z-index:2; border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060;"></canvas>
  <canvas id="cPreview" width="2" height="1" onclick="clickCompare()" style="position:absolute; z-index:1; border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060;"></canvas>    
  <canvas id="cSave" width="2" height="1" style="position:absolute; z-index:0; border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060;"></canvas>
</div>

CSS（居中码）：

<style>
  #cOriginal, #cPreview, #cSave { max-width: 100%; display: block; margin: auto; left: 0; right: 0; margin-left: auto; margin-right: auto; }     
</style>

canvases 现在分层并居中。但是 canvases 之后的所有内容都已损坏。参见 https://imgur.com/AHG59zd。谢谢！

Answer 1

第一次在SO上回答，但我相信我有你问题的答案。

我重做了 HTML 和 JavaScript 尽可能简单，因为你的问题似乎是这一切的根源，寻求帮助改变 canvas 分层，所以我尽可能简单地做到了，这是代码，然后是代码笔的link：

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Canvas Layering</title>
</head>

<body>
    <div style="position: relative;">
        <canvas id="layer1" width="100" height="100" 
            style="position: absolute; left: 0; top: 0; z-index: 0; background-image: url(https://static.pexels.com/photos/158780/leaf-nature-green-spring-158780.jpeg);" onclick="ChangePicture(1)"></canvas>
        <canvas id="layer2" width="100" height="100" 
            style="position: absolute; left: 0; top: 0; z-index: 1; background-image: url(https://static.pexels.com/photos/54320/rose-roses-flowers-red-54320.jpeg);" onclick="ChangePicture(2)"></canvas>
        <canvas id="layer3" width="100" height="100" 
            style="position: absolute; left: 0; top: 0; z-index: 2; background-image: url(https://static.pexels.com/photos/5412/water-blue-ocean.jpg);" onclick="ChangePicture(3)"></canvas>
    </div>
</body>

<script>

    function ChangePicture(layerNumber) {
        if (layerNumber === 1) {
            document.getElementById("layer1").style.zIndex = "0";
            document.getElementById("layer2").style.zIndex = "2";
            document.getElementById("layer3").style.zIndex = "1";
        } else if (layerNumber === 2) {
            document.getElementById("layer1").style.zIndex = "1";
            document.getElementById("layer2").style.zIndex = "0";
            document.getElementById("layer3").style.zIndex = "2";
        } else if (layerNumber === 3) {
            document.getElementById("layer1").style.zIndex = "2";
            document.getElementById("layer2").style.zIndex = "1";
            document.getElementById("layer3").style.zIndex = "0";
        } else {
            console.log("Failed.");
        }
    }

</script>

</html>

https://codepen.io/levi_blodgett/pen/KQyWoR

如果您想更改默认图片的开头，只需更改 html 内样式的 z-index。

使用 z-index 分层画布的问题

Issue with Layering Canvases using z-index

html

canvas

z-index