캔버스 크기를 창의 모양으로 바꿉니다.

Question

JavaScript의 높이와 너비로 설정된 HTML 캔버스가 있습니다. 그러나 창 모양이 바뀌면 페이지를 새로 고치지 않으면 캔버스 크기가 그대로 유지됩니다.

Answer 1

윈도우 크기가 변경되었을 때 캔버스의 크기를 프로그래밍 방식으로 설정하려면 Javascript 윈도우 크기 조정 수신기를 만들고 싶을 것입니다. 만드는 당신은 단지 캔버스의 width 및 height을 조정해야합니다

window.onresize = function(event) { 
    var canvas = document.getElementById('canvas'); 
    canvas.width = window.innerWidth; 
    canvas.height = window.innerHeight; 
    redraw(); // you must handle the redraw yourself 
}; 

, 반드시 사용자 지정 방법 redraw().

이 기본 코드는 JSFiddle에서 확인할 수 있습니다. 참고로

:

당신은 예상대로 작동 캔버스 요소의 CSS height 및 width을 설정할 수 있습니다.

canvas { 
    width: 50%; 
} 

하고의 문제는 캔버스에 그려진, 이것은 어떤 왜곡을 만들 수 있습니다 width 및 height 모두를 지정하는 경우이다. 그러나 하나의 속성 만 지정하면 캔버스가 비례 적으로 확장됩니다. canvas의 사용 사례에 따라 문제가 될 수 있습니다.

Answer 2

캔버스의 크기를 동적으로 조정하려면 이벤트 수신기를 추가하여 창 크기가 조정되었는지 확인하십시오. 그런 다음 캔버스를 다시 그릴 수 있습니다. 이 작업을 수행하는 방법에 대한 자세한 내용은

 function initialize() { 
      // Register an event listener to 
      // call the resizeCanvas() function each time 
      // the window is resized. 
      window.addEventListener('resize', resizeCanvas, false); 

      // Draw canvas border for the first time. 
      resizeCanvas(); 
     } 

     // Display custom canvas. 
     // In this case it's a blue, 5 pixel border that 
     // resizes along with the browser window.     
     function redraw() { 
      context.strokeStyle = 'blue'; 
      context.lineWidth = '5'; 
      context.strokeRect(0, 0, window.innerWidth, window.innerHeight); 
     } 

     // Runs each time the DOM window resize event fires. 
     // Resets the canvas dimensions to match window, 
     // then draws the new borders accordingly. 
     function resizeCanvas() { 
      htmlCanvas.width = window.innerWidth; 
      htmlCanvas.height = window.innerHeight; 
      redraw(); 
     } 

, 여기에 모든 단계를 밖으로 나열하는 우수 블로그 게시물입니다 - 그래서 http://htmlcheats.com/html/resize-the-html5-canvas-dyamically/