VPF::Нужен резиновый Canvas - Форум программистов

kuksha

Дата 17.2.2015, 08:59 (ссылка)

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

Загрузка ...

Бывалый

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

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

Здравствуйте. Помогите пожалуйста с вёрсткой макета.

Нужно сделать макет страницы из трёх колонок.
Левая и правая колонки - фиксированной ширины, находятся впритык к бокам страницы - в них обычный текст и ссылки.
А в средней колонке находится Canvas, в котором я рисую на JavaScript.
Задача в том, чтобы этот самый Canvas был максимально возможной ширины в зависимости от ширины окна.

Сейчас я задаю Canvas через PHP фиксированной ширины:

Код


echo "<canvas id=\"karta\" width=\"".$RazmerKarty."\" height=\"".$RazmerKarty."\"></canvas>\n";

Если в лоб решать, то непонятно как в PHP получить ширину окна и соответственно вычислить переменную $RazmerKarty (устраивать карусель через GET и POST ой как не хочется...).

Может ещё какие способы есть? Через JavaScript например как-то...

bork

Дата 17.2.2015, 19:49 (ссылка)

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

Загрузка ...

Шустрый

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

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

Код


 <html>
 <head>
 <style type="text/css">
.container {min-width:600px;}
.main {float:left; width:100%;}
.content {margin: 0 200px;}

.left {float:left; width:200px; margin-left:-100%; background:#B9CAFF}
.right {float:left; width:200px; margin-left:-200px; background:#FF8539}

.footer {clear:left; width:100%; background: #333; color: #FFF}
 </style>

 </head>
 <body>
<div class="container">
    <div class="main">
        <div class="content">
            echo '<canvas id="karta" width="100%" height="100%"></canvas>\n';
        </div>
    </div>

    <div class="left">
        Левый блок
    </div>

    <div class="right">
        Правый блок
    </div>

</div>

<div class="footer">Футер</div>

 </body>
 </html>

Это сообщение отредактировал(а) bork - 17.2.2015, 19:50

kuksha

Дата 22.2.2015, 00:19 (ссылка)

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

Загрузка ...

Бывалый

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

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

Спасибо! Похоже, что это то, что надо...

kuksha

Дата 23.2.2015, 23:16 (ссылка)

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

Загрузка ...

Бывалый

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

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

Дошли руки попробовать...
Нет, приведённый во втором топике код не заработал.
Приведённый пример правильно масштабирует DIV-ы по мере изменения размера окна браузера.
Но, когда дошло дело до рисования в канвасе, оказалось что браузер воспринимает проценты в размерах канваса не как проценты, а как число пикселей:
http://kosmoved.ru/nebo_segodnya_geo_21.php

При нажатии в браузере "показать исходный код": в исходном коде страницы написано:

Код


<canvas id="karta" width="100%" height="90%">

,а на канвасе в это время показывается:

Код


canvas#karta 100px x 90px

попробовал в CSS поставить так:

Код


canvas {
  height: 100%;
  width: 100%; 
}

- вообще смешно получилось: браузер нарисовал такую же маленькую картинку, примерно 100х100, а потом просто физически расятнул её до размеров DIV-а... кошмар...

В общем, фиг с ним, с макетом всей страницы...
В итоге надо подогнать размеры канваса под размеры дива, в котором он расположен...

Это сообщение отредактировал(а) kuksha - 23.2.2015, 23:35

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