计算

发布于 2024-10-19 13:04:30 字数 465 浏览 1 评论 0原文

<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>

此代码显示设置样式之前的尺寸。我需要款式确定后的尺寸。我该怎么做？

原文

<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>

This code displays the size before it has been styled. I need the size after it has been styles. How can I do this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浮生面具三千个 2024-10-26 13:04:30

你的问题源于画布的固有尺寸和它占用的 CSS 像素数量之间的差异。 HTML 规范说：

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

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

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

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>

Your problem stems from the difference between the intrinsic dimensions of the canvas and the number of CSS pixels it takes up. The HTML specification says:

The intrinsic dimensions of the canvas
element equal the size of the
coordinate space, with the numbers
interpreted in CSS pixels. However,
the element can be sized arbitrarily
by a style sheet. During rendering,
the image is scaled to fit this layout
size.

What this means is that your canvas defaults to a drawing space of 300x150px in terms of the coordinates used to draw images. However, your CSS rules will stretch the canvas to the size of the page (at least with regard to width). There will still only be 300px wide to logically draw on, but it will be scaled and physically rendered on whatever 100% of the page width corresponds to.

Anyway, the width and height properties correspond to the intrinsic drawing dimensions of the canvas. Since you care about the CSS size, you can use 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>

回复收藏 0 原文

我做我的改变 2024-10-26 13:04:30

不要在 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>

Do not use the onload function in body, but you can use window.onload instead:

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

回复收藏 0 原文

~没有更多了~