javascript - 将背景中的 Canvas 元素放置到 html 表中

Question

我正在尝试将 Canvas 元素放置为 html 表格的背景。

想法是有一张 table 并在背景中用 Canvas 播放动画。

如果我尝试，会发生什么:

<canvas width="300" height="300">
    <table class="table" id="game"></table>
</canvas>

canvas eats the table，我无法让它出现。

如果我尝试相反的做法，将 Canvas 放在 table 内，我无法找到合适的位置， Canvas 只会移动到一边。

我的想法是将 Canvas 居中，将表格居中放置在 Canvas 的中央。请注意，表格大小可能会随着 javascript 的变化而变化。如果 Canvas 的宽度/高度与表格相同就足够了。

Answer 1

使用单独的兄弟元素而不是父子关系。

<canvas></canvas>
<table></table>

绝对最简单的方法是绝对定位它们，调整它们的大小(或抓取表格的大小并更改 Canvas 的大小)并使用 z-index 堆叠它们。

canvas,
table {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 0;
  left: 0;
}

canvas {
  z-index: 1;
}
table {
  z-index: 10;
}

如果要改变表格和 Canvas 的大小，您可能需要稍微聪明一些。