我正在尝试将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;
}
如果要改变桌子和画布的尺寸,您可能必须变得更加聪明。