将canvas元素放在背景中的html表中

Question

我试图将canvas元素作为html表的背景。

我们的想法是在后台设置一个表格并使用画布播放动画。

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

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

画布吃桌子，我无法让它出现。

如果我尝试相反并将画布放在桌子内，我就无法获得一个好位置，画布就会移到一边。

我的想法是将画布居中，并将表格置于画布中心。请注意，表格大小可以通过javascript更改。如果画布获得与表格相同的宽度/高度，那就足够了。

Answer 1

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

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

绝对最简单的方法是绝对定位它们，调整它们的大小（或获取表的大小并更改画布的大小）并使用z-index来堆叠它们。

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

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

如果表和画布要改变大小，你可能需要稍微聪明一些。