Форум

Как сделать фиксированный размер канваса?

07 июля 2017 22:54
Как сделать фиксированный размер канваса, который бы изменялся в зависимости от ширины и высоты окна браузера, как в этом примере - https://playcanv.as/p/kx8rLnM1/
Зарание спасибо
09 июля 2017 08:49
Мда, сообщество конечно у вас "активное"….)

Решение очень простое - https://m.habrahabr.ru/post/187406/
09 июля 2017 23:43
Привет)

Да нормальное, просто видимо заняты многие)

А я вопрос видел, но он слишком простой был ,я думал ты сам додумаешься)

Вообще если нужно "как тут", то просто лезь в код и бери прямо "как там":


#application-canvas {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#application-canvas.fill-mode-NONE {
margin: auto;
}
#application-canvas.fill-mode-KEEP_ASPECT {
width: 100%;
height: auto;
margin: 0;
}
#application-canvas.fill-mode-FILL_WINDOW {
width: 100%;
height: 100%;
margin: 0;
}


Тебе нужен класс fill-mode-KEEP_ASPECT. Его фишка в том, что он задает ширину на всю ширину родительского элемента, а высота считается автоматически. При этом сам канвас заранее содержит свои размере в HTML:

<canvas id="application-canvas" tabindex="0" width="1516" height="853" class="fill-mode-KEEP_ASPECT" style=""></canvas>


А то что он на фулл скрине не на всю ширину сделано за счёт следующего CSS:


@media screen and (min-aspect-ratio: 1280/720){
#application-canvas.fill-mode-KEEP_ASPECT {
width: auto;
height: 100%;
margin: 0 auto;
}
}
10 июля 2017 03:17
Ну это в общем то ни как не связано с фраймворком B4W,
это скорее вопрос по CSS и верстке адаптивной или нет итд..

Канвас один или два или три вместе или по отдельности , это обычный DOM элемент и свойства его задаются через CSS по отношению к документу в котором его размещаешь.

ну выше все уже ответили…
Денис
 
Пожалуйста, зарегистрируйтесь или войдите под своей учетной записью , чтобы оставлять сообщения.