캔버스에 내용의 크기를 조정하는 방법은 무엇입니까?

Question

캔버스를 만들었지 만 창 크기를 조정하면 캔버스 내용이 사라집니다. 다음 코드를 사용하고 있습니다. 캔버스와 배경 이미지의 원래 크기는 960x558입니다. 캔버스와 배경 이미지의 크기가 다르기 때문에 app.stage.canvas의 너비와 높이를 사용하고 있습니다.

function resize(){ 
     app.stage.canvas.width = $('#canvas').parent().width(); 
     //app.stage.canvas.height = window.innerHeight; 
     app.stagetools.canvas.width = $('#canvas').parent().width(); 


     //tools container 
     if(app.stage.canvas.width < 960){ 
      app.stage.canvas.height = '558'; 
     } 

     if(app.stage.canvas.width < 739){ 
      app.stage.canvas.height = '400'; 
     } 

     if(app.stage.canvas.width < 510){ 
      app.stage.canvas.height = '300'; 
     } 

     if(app.stage.canvas.width < 450){ 
      app.stage.canvas.height = '240'; 
      tools.toolsScale = 0.7; 
     } 

     tools.toolsContainer.scaleX = tools.toolsScale; 
     tools.toolsContainer.scaleY = tools.toolsScale; 
     tools.toolsContainer.x = app.stagetools.canvas.width/2 - 150 * tools.toolsScale; 



     app.container.x = app.stage.canvas.width/2; 
     app.container.y = app.stage.canvas.height/2; 

     //background image  
     app.bgscale = app.stage.canvas.width/app.backgroundBounds.width; 

     if(app.backgroundBounds.height * app.bgscale > app.stage.canvas.height){ 
      app.bgscale = app.stage.canvas.height/app.backgroundBounds.height; 
     } 

     app.backgroundContainer.scaleX = app.bgscale; 
     app.backgroundContainer.scaleY = app.bgscale; 


     app.backgroundContainer.x = Math.floor(app.stage.canvas.width/2 - app.backgroundBounds.width/2 * app.bgscale); 
     app.backgroundContainer.y = Math.floor(app.stage.canvas.height/2 - app.backgroundBounds.height/2 * app.bgscale); 


     tools.clearHandler(); 

     app.stage.update(); 
     app.stagetools.update(); 

    } 

Answer 1

예상되는 내용입니다. 캔바스의 크기를 변경할 때 내용이 지워집니다. 사용자 에이전트는 비트 맵 크기를 설정하는 는 다음 단계를 실행해야합니다, 폭과 높이입니다

: 다음 standard에서

을 ...
3. 처음의 크기를 조정 비트 맵을 새로운 너비와 높이로 이동하고 완전히 투명한 검은 색으로 지 웁니다.
4. 렌더링 컨텍스트에 출력 비트 맵이 있고 스크래치 비트 맵이 출력 비트 맵과 다른 비트 맵인 경우 출력 비트 맵의 ​​크기를 새 너비와 높이로 조정하고 완전히 투명한 검정색으로 지 웁니다.

가 호출 할 때 모든 콘텐츠를 창 개체의 크기 조정 이벤트를 수신하고 다시 그리기해야이 문제를 효율적으로 활용하려면 다음이 도움이

window.addEventListener("resize", function() { 
    // call redraw method here... 
}, false); 

희망을.