叠加 HTML Canvas 元素

Question

我有一个包含堆叠 <canvas> 元素的 WWWeb 页面。目标是在下部 canvas 中绘制持久的东西，并在上部 canvas 中反复绘制、清除和重绘。根据 w3.org 和 this Whosebug article (How do I make a transparent canvas in html5?)，canvas 元素默认是透明的。我所看到的是，它们不仅不透明，而且通过 z-index 进行的覆盖也不起作用。这是页面代码的 "vanilla" 版本（完整并用于生成图像）：

    <html>
    <head>
        <title>Canvas Stack</title>
        <script>
            function doStuff() {
                drawStuff(document.getElementById("lowerCanvas"), 0, 1);
                drawStuff(document.getElementById("upperCanvas"), 1, 0);
            }
            function drawStuff(cvs, p0X, p1X) {
                var ctx = cvs.getContext("2d");
                ctx.clearRect(0, 0, cvs.width, cvs.height);
                ctx.strokeStyle = cvs.style.color;
                ctx.beginPath();
                ctx.moveTo(p0X * cvs.width, 0);
                ctx.lineTo(p1X * cvs.width, cvs.height);
                ctx.stroke();
            }
        </script>
    </head>
    <body onload="doStuff();" style="border:solid;">
        <canvas id="lowerCanvas" style="color:red;height:200px;left:0;position:inherit;top:0;width:300px;z-index:0;" />
        <canvas id="upperCanvas" style="color:blue;height:200px;left:0;position:inherit;top:0;width:300px;z-index:1;" />
    </body>
    </html>

结果如下：

如果我调换 canvas 个元素的顺序

    <canvas id="upperCanvas" style="color:blue;height:200px;left:0;position:inherit;top:0;width:300px;z-index:1;" />
    <canvas id="lowerCanvas" style="color:red;height:200px;left:0;position:inherit;top:0;width:300px;z-index:0;" />

结果是

似乎 z-index 被忽略了，声明的顺序是首要的。

我要的是

（合成图像）

Chrome、Edge、Firefox 和 Internet Explorer 在 Windows10 下的行为是相同的。这让我确信我只是遗漏了一些细节，而不是遇到异常。但是，我的头撞到墙上导致额头变平，在此非常感谢您的指导。

谢谢大家！

一些注意事项（可能不相关；可能不相关）：

style="position:absolute;...（没有 left 和 top 条目）似乎与 style="left:0;position:absolute;top:0;...
以类似的方式，如果 canvas 位于 table 的 <td> 中并且 <td> 可能需要 style="position:inherit;... ] 不是 <tr>.

Answer 1

    <html>
    <head>
        <title>Canvas Stack</title>
        <script>
            function doStuff() {
                drawStuff(document.getElementById("lowerCanvas"), 0, 1);
                drawStuff(document.getElementById("upperCanvas"), 1, 0);
            }
            function drawStuff(cvs, p0X, p1X) {
                var ctx = cvs.getContext("2d");
                ctx.clearRect(0, 0, cvs.width, cvs.height);
                ctx.strokeStyle = cvs.style.color;
                ctx.beginPath();
                ctx.moveTo(p0X * cvs.width, 0);
                ctx.lineTo(p1X * cvs.width, cvs.height);
                ctx.stroke();
            }
        </script>
    </head>
    <body onload="doStuff();" style="border:solid;">
    <div style="position:relative;min-height:200px">
        <canvas id="lowerCanvas" style="color:red;height:200px;left:0;position:absolute;top:0;width:300px;z-index:0;"></canvas>
        <canvas id="upperCanvas" style="color:blue;height:200px;left:0;position:absolute;top:0;width:300px;z-index:1;"></canvas>
    </body>
    </html>

您需要明确关闭 canvas 元素。只需将其关闭：

<canvas id="lowerCanvas" style="color:red;height:200px;left:0;position:inherit;top:0;width:300px;z-index:0;"></canvas>

而不是嵌入式关闭“/>”

我还将它们封装在 div 中并使用 position:absolute 以便它们实际上重叠...

叠加 HTML Canvas 元素

Overlayed HTML Canvas Elements

html

javascript

transparency

canvas

z-index