Question

我有一个堆叠<canvas>元素的WWWeb页面。目标是在下部画布中绘制持久性内容，并在上部画布中重复绘制，清除和重绘。根据w3.org和this StackOverflow article（How do I make a transparent canvas in html5?），canvas元素默认是透明的。我所看到的是，它们不仅不透明，而且通过z-index覆盖也不起作用。这是＆＃34;香草＆＃34;页面版本的代码（完成并用于生成图像）：

    <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 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并且声明的顺序具有首要地位。

我想要的是

（合成图像）

在Windows 10下，Chrome，Edge，Firefox和Internet Explorer的行为完全相同。这使我确信我只是错过了一些细节，而不是遇到异常。然而，我的头部被撞到墙上得到了一个扁平的前额，并且非常感谢这里的一些指导。

谢谢大家！

一些笔记（可能不相关;也许不是）：

style="position:absolute; ...（没有left和top条目）似乎与style="left:0;position:absolute;top:0;做同样的事情......
以类似的方式，如果画布位于表格style="position:inherit;中且<td>不是第一个<td>，则可能需要<tr> ... {{1}}。

Answer 1

＆＃13;

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

＆＃13;

您需要显式关闭画布元素。只需关闭它：

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

而不是嵌入式关闭＆＃34; /＆gt;＆＃34;

我还将它们包含在div中并使用了position：absolute以便它们实际重叠......

叠加的HTML画布元素

1 个答案: