Вычисляет размер <canvas>под нагрузкой? - PullRequest
Новая
       5

Вычисляет размер <canvas>под нагрузкой?

2 голосов
/ 28 февраля 2011 
<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>

Этот код отображает размер до его стилизации. Мне нужен размер после стилей. Как я могу это сделать?

Ответы [ 2 ]

5 голосов
/ 28 февраля 2011

Ваша проблема связана с разницей между внутренними размерами холста и количеством пикселей CSS, которые он занимает. Спецификация HTML гласит:

Внутренние размеры холста элемент равен размеру координатное пространство, с числами интерпретируется в CSS-пикселях. Тем не мение, размер элемента может быть произвольным по таблице стилей. Во время рендеринга изображение масштабируется, чтобы соответствовать этому макету размер.

Это означает, что ваш холст по умолчанию использует пространство для рисования размером 300x150 пикселей по координатам, используемым для рисования изображений. Однако ваши правила CSS будут растягивать холст до размера страницы (по крайней мере, в отношении ширины). По-прежнему будет только 300 пикселей в ширину для логического рисования, но он будет масштабирован и физически визуализирован на 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>
0 голосов
/ 28 февраля 2011

Не используйте функцию 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...