그려진 후에 전체 화면으로 캔버스 크기 조정

Question

HTML 캔버스에 그려진 간단한 게임을 자바 스크립트로 작성하고 있습니다. 캔버스는 고정 된 크기 (1280 × 720)를 가지며 객체가 그려지는 "공간"이기도합니다.

이제 캔버스를 화면의 100 %로 늘리 길 원합니다. javascript는 왼쪽 상단의 1280 × 720 사각형 만 그리기 때문에 캔버스의 너비와 높이를 설정하면됩니다.

내가 원하는 것은 전체 화면을 차지하도록 확대되고 자바 스크립트가 (1280, 720)에서 무언가를 그릴 경우 오른쪽 하단에 위치해야한다는 것입니다.

외부 라이브러리를 사용하지 않고도이 작업을 수행 할 수 있습니까?

Answer 1

캔버스의 렌더링 크기를 1280x720으로 유지하면서 창 크기를 늘리거나 늘리려면 CSS 너비와 높이를 사용할 수 있습니다.

CSS를 사용하면 캔버스의 모양이 변경되지만 내부 픽셀/그림 프레임은 너비 및 높이 특성으로 설정됩니다. 스크립트와

* { margin: 0; padding: 0;} 
 

 
body, html { height:100%; } 
 

 
#canvasID { 
 
    position:absolute; 
 
    height:100%; 
 
    /*width:100%; /* uncomment if you don't care about aspect ratio*/ 
 
}

<canvas id="canvasID" width=128 height=72>

:

$(document).ready(function() { 
 
    function resizeCanvas() { 
 
    var canvas = $("#canvasID"); 
 
    // original width/height from the canvas attribute 
 
    var heightOriginal = canvas[0].height; 
 
    var widthOriginal = canvas[0].width; 
 

 
    // fill to window height while maintaining aspect ratio 
 
    var heightNew = window.innerHeight; 
 

 
    // replace with window.innerWidth if you don't care about aspect ratio 
 
    var widthNew = heightNew/heightOriginal * widthOriginal; 
 

 
    canvas.css("height", heightNew + "px"); 
 
    canvas.css("width", widthNew + "px"); 
 
    } 
 

 
    // keep size when window changes size 
 
    $(window).resize(resizeCanvas); 
 

 
    // initial resize of canvas on page load 
 
    resizeCanvas(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<canvas id="canvasID" width=128 height=72>

CSS와

(훨씬에 고급 인 경우 이는 물론 이미지가 흐릿하게)

내부 캔버스 해상도/크기를 동적으로 변경하려면 크기를 사용하여 모든 것이 올바른 크기로 렌더링되도록하십시오.

$(document).ready(function() { 
 
    var canvas = $("#canvasID"); 
 
    // original width/height from the canvas attribute 
 
    var heightOriginal = canvas[0].height; 
 
    var widthOriginal = canvas[0].width; 
 
    // current scale (original 1 to 1) 
 
    var verticalRatio = 1; 
 
    var horizontalRatio = 1; 
 

 
    // the canvas context 
 
    var ctx = canvas[0].getContext('2d'); 
 

 
    function setScale() { 
 
     // remove previous scale 
 
     ctx.scale(1/horizontalRatio, 1/verticalRatio); 
 

 
     // fill to window height while maintaining aspect ratio 
 
     var heightNew = window.innerHeight; 
 
    
 
     // not needed if you don't care about aspect ratio 
 
     var widthNew = heightNew/heightOriginal * widthOriginal; 
 

 
     // these would be the same if maintaining aspect ratio 
 
     verticalRatio = heightNew/heightOriginal; 
 
     horizontalRatio = widthNew/widthOriginal; 
 
     
 
     // update drawing scale 
 
     ctx.scale(horizontalRatio, verticalRatio); 
 

 
     // update width and height of canvas 
 
     canvas[0].height = heightNew; 
 
     canvas[0].width = widthNew; 
 
    } 
 
    
 
    // keep size when window changes size 
 
    $(window).resize(setScale); 
 
    
 
    // initial resize of canvas on page load 
 
    setScale(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<canvas id="canvasID" width=128 height=72>