Fatal编程技术网
  • html/
  • Html 使用z索引分层画布的问题

Html 使用z索引分层画布的问题

html canvas

Html 使用z索引分层画布的问题,html,canvas,z-index,Html,Canvas,Z Index,我在这里回顾了许多canvas z-index帖子，包括： 但我没有找到我的问题的答案 我试图简单地将一个画布直接放在另一个画布后面。当用户单击画布时，它将更改堆叠顺序。但画布不是前后相接，而是可以看到它们，一个在上面，一个在下面（不是在后面）（参见） HTML和CSS： <div id="preview" style="visibility:hidden;"> <canvas id="cOriginal" width="2" height="1" onclick="

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



但我没有找到我的问题的答案

我试图简单地将一个画布直接放在另一个画布后面。当用户单击画布时，它将更改堆叠顺序。但画布不是前后相接，而是可以看到它们，一个在上面，一个在下面（不是在后面）（参见）

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（居中代码）：


#cOriginal，#cPreview，#cSave{最大宽度：100%；显示：块；边距：自动；左：0；右：0；左：自动边距；右：自动边距；}
画布现在已分层并居中。但画布后面的一切都破裂了。看见谢谢大家!

第一次这样回答，但我相信我已经找到了你问题的答案

我将HTML和JavaScript重新定义为尽可能简单化，因为您的问题似乎是所有问题的根源，请求更改画布分层的帮助，所以我尽可能简单地完成了操作，下面是代码，然后是指向代码笔的链接：

<!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>


帆布分层
功能更改图片（图层编号）{
如果（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”；
}否则{
console.log（“失败”）；
}
}

如果要更改图片的默认开头，只需更改html中样式的z索引即可

这确实成功地将3张画布放在了一起。不幸的是，它们位于屏幕最左侧，而不是居中。但是，我想我可能已经解决了。我会让你知道的。谢谢好的，解决了分层问题，唯一的问题是所有的东西都放在左边，我用CSS代码解决了这个问题。唯一的问题是，页面停在画布底部，画布下方的项目出现在页面后面。如果您（或任何人）有解决该问题的建议，请让我知道！请看一看，这会比我解释得更好。简言之，图像下的控件，我怀疑还有页脚，现在都在画布后面。我明白了你的意思，一旦我查看了你的更新，你想做的是在下面留一个空白，因为它是一个绝对位置，这意味着它忽略了其他元素及其间距，但是你可以做什么，增加其周围的边距以适当间隔，即：位置：绝对；左：50%；顶部：500px；这将允许您正确地分隔所有内容。因此我的代码没有任何问题，这只是必须对层使用“绝对”的结果？另外，我现在不需要重新定位画布下方的所有内容吗？为什么不使用一块画布，按照您想要的顺序绘制图像呢。它更快（不需要强制回流，也不需要不受控制的合成），代码更简单。谢谢你的评论，但这在这里不起作用。该代码将用于显示原始图像和编辑图像。编辑代码遍历图像以读取图像，对R、G.B、A数组进行更改，然后再次迭代以重画图像。在大图像上，这可能很耗时。如果图像可以绘制一次，然后简单地交换z索引顺序，那么复制所有这些就没有意义了。只需将编辑后的图像保留为屏幕外画布即可。总的来说，您将获得性能提升。您可以将画布绘制到画布，就像绘制图像一样
ctx.drawImage（canvas2,0,0）
@Blindman67这很有趣，谢谢你指出。让“canvas2”远离屏幕的首选方式是什么？ 
<!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>