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

Question

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

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

спасибо!

Answer 1

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

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

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

Чтобы получить ширину и высоту просто использовать document.getElementById («холст»). Ширина/высота

Answer 2

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

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

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