如何使画布填满表格的整个区域

Question

我正试图创建一个匹配的游戏。我创建了一个左右表，其中包含要匹配的元素。中间表包含画布。

然而，画布仅在表格中居中，在其顶部和下方留下了大量空间，使得匹配变得不可能。

有没有让画布填满桌子的整个区域？

守则

＆＃13;

＆＃13;

table {
  margin-left: auto;
  margin-right: auto;
}
table ul {
  list-style-type: none;
  margin-left: 50px;
  padding: 0;
  padding-left: 5px;
  width: 200px;
}

＆＃13;

<table class="first">
  <tr>
    <td>
      <ul class="firstleft"></ul>
    </td>
    <td>
      <canvas id="myCanvas" resize></canvas>
    </td>
    <td>
      <ul class="firstright"></ul>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/ngkghxja/

Answer 1

重要的是要注意画布有两种尺寸 - 绘图表面的大小和画布元素本身的大小。您希望通过更改画布td和width属性，将绘图曲面的大小设置为父height元素的尺寸。

使用jQuery，您可以执行以下操作：

var canvas = document.getElementById("myCanvas");
var $td = $('canvas').parent();
canvas.width = $td.width();
canvas.height = $td.height();

如果没有jQuery，你必须使用parentNode的clientWidth和clientHeight：

var td = canvas.parentNode;
canvas.width = td.clientWidth;
canvas.height = td.clientHeight;