VPF::html5 canvas ширина 100% - Форум программистов

shtuceron

Дата 24.11.2011, 11:03 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 161
Регистрация: 17.2.2008

Репутация: нет
Всего: нет

Здравствуйте, скажите, как можно поддерживать размеры canvas по ширине окна, чтобы при перерисовки содержимое не растягивалось, а сохраняло свои пропорции, пытаюсь сделать так, но при растяжении/сжатии окна контент пропадает полностью

Код


<html>
  <head>
    <title>Metro Map</title>
    <script type="text/javascript">
        var canvas;
        var ctx;
     
        function resizeWindow() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        
        function resizeWindowEnded() {
            draw();
        }
        
        function draw() {
            canvas = document.getElementById('mapCanvas');
            
            if (canvas.getContext) {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            
                ctx = canvas.getContext('2d');
                                
                ctx.lineWidth = 5;
                ctx.strokeStyle = "black";
                
                ctx.beginPath();
                ctx.arc(75, 75, 10, 0, 2*Math.PI, true);
                ctx.closePath();
                
                ctx.stroke();
            }
        }
    </script>
    <style type="text/css">
        body { margin: 0px 0px; padding: 0px 0px; }
        #mapCanvas { border: 1px solid black }
    </style>
  </head>
  <body onload="draw();" onresize="resizeWindow();" onresizeend="resizeWindowEnded();">
    <canvas id="mapCanvas"></canvas>
  </body>
</html>

Спасибо.

ksnk

Дата 24.11.2011, 16:20 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

onresizeend
какой интересный метод. Он в самом деле работает? smile

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »