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

这个想法是要有一张桌子,并在后台播放带有画布的动画。

如果尝试的话,会发生什么:

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


画布在桌子上吃饭,我无法让它出现。

如果我尝试相反的操作并将画布放在桌子内,我将无法获得良好的位置,画布只会移动到侧面。

我的想法是将画布居中,并将桌子居中于画布中心。请注意,表格大小可以使用javascript更改。如果画布具有与表格相同的宽度/高度,就足够了。

最佳答案

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

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


如果要改变桌子和画布的尺寸,您可能必须变得更加聪明。

10-07 19:05
查看更多