HTML5 캔버스 - 브라우저 창의 전체 범위

Question

HTML5 캔버스를 브라우저의 전체 범위로 가져 오는 가장 좋은 방법은 무엇입니까?

1. 절대, 위, 왼쪽, 오른쪽, 아래를 0으로 설정하십시오.
2. 또는 javascript에서 문서 너비와 높이를 읽고 해당 크기로 캔버스를 설정 했습니까?

Answer 1

CSS를 사용하여 캔버스 크기를 제어하면 캔버스 출력의 크기가 조정됩니다. 이렇게하면 캔버스가 내부 해상도를 유지하기 때문에 프로그래밍이 조금 더 쉬워 지지만 그 결과 그래픽 출력이 흐려집니다. 당신이 window.onresize에 이벤트 리스너를 추가하고 canvas.width하고 창 크기를 조정할 때마다 canvas.height을 조정하지만 지금은 응용 프로그램이 캔버스 해상도는 것을 추가 복잡성을 처리 할 때

당신은 흐릿 그래픽 문제가되지 않습니다 변수이며 언제든지 변경할 수 있습니다.

후자의 문제를 해결하려면 resize 이벤트 처리기에서 context.scale을 사용하여 캔버스의 좌표계를 새 창 크기로 조정할 수 있습니다. 이렇게하면 나머지 코드가 일정한 좌표계로 작업 할 수 있습니다. 모든 변환 함수는 누적 연산이므로 배율을 여러 번 호출하면 예상치 못한 결과가 발생할 수 있습니다. 그러나 context.setTransform(1, 0, 0, 1, 0, 0)을 호출하여 모든 변환을 기본값으로 재설정 할 수 있습니다.