javascript - 与父级相同大小的 Canvas

Question

我有一个漂亮的 HTML 布局，带有左栏、右栏和中心区域。左侧栏有一个顶部和底部的文本标签和(未注释时)垂直居中的 Canvas 。当浏览器窗口大小发生变化时，布局实际上会很好地自行调整大小。

当我取消注释 Canvas 并尝试使用处理调整大小消息的 JavaScript 使其适合父级大小时，它以某种方式阻止布局根据窗口范围自行调整大小。相反，窗口会获得一个垂直滚动条，并且布局不再是“100%”，而是大于视口(viewport)大小。

有问题的代码看起来像这样:

<tr style="height: 80%;">
    <td align="center" id="controlparent" bgcolor="#E6E6FA">
        <canvas id="control" width="100%" height="100%" class="slider" style="background-color:blue"></canvas>
    </td>
</tr>

我犯了什么错误？

(请注意，我现在正在使用 HTML 表格进行布局 - 我已经尝试过使用 CSS 进行布局，这对初学者来说太痛苦了)。

Here's my fiddle .

Answer 1

Canvas width 和 height 属性(和属性)始终以没有任何单位的像素形式给出。

如果您不想使用 CSS，在这种情况下您将使用元素内的 style="width:100%;height:100%" 属性，您需要计算使用 JavaScript 的父元素的宽度/高度。

使用 JavaScript 计算父大小:

var ctrl = document.getElementById("control"),
    parentSize = ctrl.parentNode.getBoundingClientRect();

ctrl.width  = parentSize.width;
ctrl.height = parentSize.height;

html, body {width:100%; height:100%; margin:0}

<tr style="height: 80%;">
  <td align="center" id="controlparent" bgcolor="#E6E6FA">
    <canvas id="control" width="100%" height="100%" class="slider" style="background-color:blue"></canvas>
  </td>
</tr>