4

这让我很困惑，也很有趣，我希望。

如果有人能指出我在 CSS/canvas 规范方面行为差异的根源，我很感兴趣，我知道有关如何填充父容器的其他解决方案，所以请不要这样的答案。

考虑这个 HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <style type="text/css">
      html, body, #container {
        height: 100%; width: 100%; padding: 0; margin: 0;
      }

      #container {
        position: relative;
      }

      #content {
        position: absolute;
        border: 1px solid red;
        background-color: blue;

        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        height: auto;
      }
    </style>
  </head>

  <body>
    <div id="container">
      <canvas id="content"></canvas>
    </div>
  </body>
</html>

JSFiddle：http: //jsfiddle.net/2zH5H/。此 HTML 导致画布的大小使用画布规范要求的默认宽度/高度 (300x150)，而不是像 CSS 规则定义的那样填充父容器。您可以验证这是否有效，无需对任何其他块元素进行任何更改，例如 div：http: //jsfiddle.net/8AQVj/1/

同样，我们谈论的是屏幕上元素的大小，而不是画布上下文的尺寸。这种行为在 Chrome、Firefox 和 IE 中是一致的，所以我猜它必须源于某个地方的规范，但我找不到相关的片段。

4

1 回答 1

0

您在画布上拥有的大小属性设置为 auto ，这是这些属性的默认值，因此在这种情况下您将获得默认大小。如果将其更改为继承，那么它将填充其父容器，即使其在标签本身中指定的上下文设置为特定度量。为了确保我是对的，我在小提琴中检查了它。

于 2013-07-15T16:46:13.547 回答