Question

<html>
<head>

<style type="text/css">
    canvas { width: 100%; height: 100%; }
</style>

<script>
    function init() {
        canvas = document.getElementById('canvas');
        alert(canvas.width + "x" + canvas.height);
    }
</script>

</head>

<body onload="init();">
    <canvas id="canvas"> </canvas>
</body>

</html>

此代码显示样式之前的大小。它是风格后我需要的尺寸。我怎么能这样做？

Answer 1

您的问题源于画布的内在尺寸与其占用的CSS像素数之间的差异。 HTML specification说：

画布的内在尺寸元素等于的大小坐标空间，数字以CSS像素解释。然而，元素可以任意调整大小通过样式表。在渲染过程中缩放图像以适应此布局大小

这意味着您的画布默认为用于绘制图像的坐标的绘图空间为300x150px。但是，CSS规则会将画布拉伸到页面大小（至少在宽度方面）。仍然只有300px宽的逻辑绘制，但它将在任何100％的页面宽度对应的范围内进行缩放和物理渲染。

无论如何，width和height属性对应于画布的内在绘图尺寸。由于您关心CSS大小，因此可以使用window.getComputedStyle。

http://jsfiddle.net/3DDsX/

<head>
  <style>
    canvas { width: 100%; height: 100% }
  </style>
  <script>
    function init() {
      var canvas = document.getElementById('canvas');
      var style = getComputedStyle(canvas);
      alert(style.width + ' x ' + style.height);
    }
  </script>
</head>
<body onload="init();">
  <canvas id="canvas"></canvas>
</body>

Answer 2

不要在body中使用onload函数，但可以使用window.onload：

<html>
    <head>
        <script>
            function onLoadDoIt() 
            {
                alert(document.getElementById("mydiv"));  
            }
            window.onload = onLoadDoIt;
        </script>
    </head>
    <body>
        <div id="mydiv">test</div>
    </body>
</html>

计算加载时<canvas>的大小？</canvas>

2 个答案: