html5 Canvas2D를 사용하여 반응 형 그리드 그리기

Question

캔버스가 브라우저 윈도우의 전체 너비와 높이를 차지하도록 Canvas2D를 사용하여 3x3 크기의 이미지 격자를 그리는 방법을 계획 중입니다. 이미지의 너비와 높이의 1/3).

이 단계는 간단하지만 브라우저 창 크기를 조정할 때 모든 이미지의 크기가 올바르게 조정되도록하려면 어떻게해야합니까?

Answer 1

이 질문의 첫 번째 부분은 this SO thread 내에서 응답해야합니다.

그런 다음 브라우저 창의 실제 너비와 높이를 가져 오는 방법이 있습니다. 해당 속성은 window.innerWidth 및 window.innerHeight입니다. resize 이벤트가 발생하면 이러한 속성의 값을 찾아 그리드 차원을 얻기 위해 3으로 나누는 함수를 실행해야합니다. 캔버스 크기를 조정하면 해당 비트 맵에 저장된 모든 비트 맵 데이터가 지워집니다.