캔버스 요소 크기 조정 및 가로 세로 비율 유지

Question

캔버스 요소가있는 간단한 html5 페이지가 있습니다. 이제 캔버스 요소가 항상 페이지의 사용 가능한 크기로 조정되지만 특정 종횡비를 유지하고 싶습니다.

또한 자바 스크립트 코드에서 캔버스 요소의 현재 배율을 어떻게 얻을 수 있습니까?

감사합니다.

Answer 1

w가 너비이고 너 높이가 너비 인 경우. w/h가 귀하의 비율입니다.

이제 페이지 너비가 커지거나 작아집니다. 새 너비 이름이 newW라고 가정 해 봅시다. 그리고 newH를 찾고 있습니다.

비율을 유지하려면 수학을 수행하십시오. newH = newW/(w/h);

귀하의 폭을 얻으려면, 높이 그냥 document.getElementById를 ("캔버스")를 사용합니다. 너비/높이

Answer 2

이것은 여기서 중요한 것은 높이가 자동으로 조정한다는 것이다

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

작동합니다 캔버스 요소가있는 종횡비가 무엇이든간에.