2012-08-19 4 views
1

내 웹 사이트의 정적, 테스트 버전은 여기 호스팅있어 :Firefox에서 어떻게 전체 화면으로 캔버스를 확장 할 수 있습니까?

http://alexgolec.staticloud.com/

하지만 난 파이어 폭스에서 그것을 불 때, 캔버스가 제대로 크기를 조정하지 않습니다. 나는 코드의 잘못된 라인 여기 생각 :

var _docHeight = (document.height !== undefined) ? document.height : 
         document.body.offsetHeight; 
    var _docWidth = (document.width !== undefined) ? document.width : 
        document.body.offsetWidth; 

    ctx.canvas.width = _docWidth; 
    ctx.canvas.height = _docHeight; 

이 코드는 웹킷 브라우저에서 제대로 작동하지만 게코 그것에 발프 것으로 보인다.

답변

2

페이지가 멋지게 보입니다. 하지만 크기 조정 후 배경이 다시 칠되지 않으므로 Chrome에서 제대로 표시되지 않는다고 생각합니다.

이벤트 리스너를 onResize 이벤트에 연결하고 해당 핸들러에서 canvasMain()을 호출하여 새로운 캔버스 크기로 모든 것을 다시 그립니다.

크기 조정 문제에 대해서는 window.innerWidthwindow.innerHeight을 사용해야합니다. <body>은 320px 높이의 콘텐츠로 압축되어 전체 페이지를 채우지 않습니다.

관련 문제