масштабирование элемента canvas и сохранение соотношения сторон

Question

У меня есть простая html5-страница с элементом canvas определенного размера. Теперь я хочу, чтобы элемент canvas всегда масштабировался до доступного размера страницы, но при этом сохранял определенное соотношение сторон.

также, как я могу получить текущий коэффициент масштабирования элемента canvas в коде JavaScript?

спасибо!

Answer 1

Если w - ваша ширина, а h - ваш рост. ш / ч ваше соотношение.

Теперь ширина вашей страницы больше или меньше. Допустим, ваша новая ширина называется newW. И вы ищете новый.

Чтобы сохранить соотношение, просто сделайте математику: newH = newW / (w / h);

Чтобы получить ширину и высоту, просто используйте document.getElementById ("canvas"). Width / height

Answer 2

Это должно работать

canvas {
 outline: 0px;
 position: absolute;
 left: 0px;
 top: 0px;
 width: 100%;
 height: auto;
}

Ключевым моментом здесь является то, что высота автоматически подстраивается под любое соотношение сторон, в котором находится элемент canvas.