창에 맞게 HTML5 캔버스 크기 조정

400

<canvas>페이지에 맞게 HTML5 요소의 크기를 자동으로 조정하려면 어떻게 해야합니까?

예를 들어 and 및 속성을 100 % <div>로 설정하여 스케일을 조정할 수 있지만 스케일되지 않습니다.heightwidth<canvas>

javascript  html  html5-canvas 
— 데빈
소스
7
왜 canvas {width : 100 %; height : 100 %}가 작동하지 않습니까?
— zloctb
28
@zloctb-캔버스를 직접 확장하여 이미지를 늘립니다.
— Derek 朕 會 功夫
8
관련 문제에 대해 수행 할 작업과 수행 할 작업에 대한 자세한 설명 은 WebGL 기초 를 참조하십시오 .
— legends2k
2
캔버스는 확장 성이 좋으며 CSS {width : 100 %}를 추가하기 만하면됩니다. 그러나 그 내용은 전혀 문제가되지 않습니다.
— ejectamenta

답변:

372

나는 이것에 대한 우아한 해결책을 찾았다 고 생각합니다.

자바 스크립트

/* important! for alignment, you should make things
 * relative to the canvas' current width/height.
 */
function draw() {
  var ctx = (a canvas context);
  ctx.canvas.width  = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  //...drawing code...
}

CSS

html, body {
  width:  100%;
  height: 100%;
  margin: 0;
}

지금까지 나에게 큰 부정적인 영향을 미치지 않았습니다.

— 데빈
소스
7
다음과 같이 여백을 비활성화해야합니다 body, html { margin: 0px;}
— .
45
크기 조정 이벤트를 듣는 것이 바람직합니까?
— Eric
25
@Elisabeth : 스크롤바를 제거하려면 html 및 body 요소 스타일에 "overflow : hidden"을 추가하십시오. www.thefutureoftheweb.com/blog/100-percent-height-interface
— Denis Washington
17
나는이 작업을 더하여 캔버스를 display : block으로 설정했습니다 (추가 공간을 생성하는 인라인 인 기본 표시 인 것 같습니다!).
— 엘리자베스
15
이것은 안티 패턴 일 수 있습니다. 이유와 해결책은 여기에서 세 번째 항목을 참조하십시오 .
— legends2k
67

다음 솔루션이 가장 효과적이었습니다. 나는 코딩에 비교적 익숙하지 않기 때문에 내가 기대하는 방식으로 무언가가 작동하고 있음을 시각적으로 확인하고 싶습니다. 다음 사이트에서 찾았습니다. http://htmlcheats.com/html/resize-the-html5-canvas-dyamically/

코드는 다음과 같습니다.

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>Resize HTML5 canvas dynamically | www.htmlcheats.com</title>
    <style>
    html, body {
      width: 100%;
      height: 100%;
      margin: 0px;
      border: 0;
      overflow: hidden; /*  Disable scrollbars */
      display: block;  /* No floating content on sides */
    }
    </style>
</head>

<body>
    <canvas id='c' style='position:absolute; left:0px; top:0px;'>
    </canvas>

    <script>
    (function() {
        var
        // Obtain a reference to the canvas element using its id.
        htmlCanvas = document.getElementById('c'),
        // Obtain a graphics context on the canvas element for drawing.
        context = htmlCanvas.getContext('2d');

       // Start listening to resize events and draw canvas.
       initialize();

       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();
        }
    })();

    </script>
</body> 
</html>

파란색 테두리는 크기 조정 캔버스의 가장자리를 보여 주며 항상 4 변 모두에서 볼 수있는 창의 가장자리를 따라옵니다. 위의 다른 답변에는 해당되지 않습니다. 도움이 되길 바랍니다.

— 크레이그 모리슨
소스
이 답변은 내 문제를 해결했습니다. overflow: hidden와 display: block나를 제대로이 작업을 얻을 누락 된 것입니다.
— Deathicon
1
링크가 끊어짐
— Nic Scozzaro
22

기본적으로해야 할 일은 onresize 이벤트를 몸에 바인딩하는 것입니다. 일단 이벤트를 잡으면 window.innerWidth 및 window.innerHeight를 사용하여 캔버스 크기를 조정하면됩니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Canvas Resize</title>

    <script type="text/javascript">
        function resize_canvas(){
            canvas = document.getElementById("canvas");
            if (canvas.width  < window.innerWidth)
            {
                canvas.width  = window.innerWidth;
            }

            if (canvas.height < window.innerHeight)
            {
                canvas.height = window.innerHeight;
            }
        }
    </script>
</head>

<body onresize="resize_canvas()">
        <canvas id="canvas">Your browser doesn't support canvas</canvas>
</body>
</html>
— equiman
소스
1
이벤트 리스너 만 사용할 수 있습니다.
— David Corbin
여기에는 여백이 있고 스크롤 막대가 표시되며, 화면을 조정하기 전에 화면 크기를 조정해야합니다.
— ArtOfWarfare
캔버스가 뷰포트보다 큰 경우 (뷰포트를 더 좁거나 짧게 만들 때) 어떻게됩니까? 이 솔루션은 처리하지 않는 것 같습니다.
— Lars Gyrup Brink Nielsen
@ArtOfWarfare 독창적 인 질문에는 스타일에 대한 언급이 없습니다. 그러나 CSS로 스타일을 지정하고 원하는 경우 여백을 제거하고 스크롤 막대를 숨길 수 있습니다. 그리고`<body onload = "resize_canvas ()">`를 추가 한 다음 페이지를로드 할 때 캔버스 크기를 조정할 수 있습니다.
— equiman
@LayZee 원래 질문 saya bout 캔버스가 뷰포트가 아닌 페이지 에 맞게 조정 됩니다. 또 다른 질문이 될 수 있습니다.
— equiman
19

브라우저 클라이언트의 크기를 기준으로 캔버스 좌표 공간 너비 및 높이를 설정하려면 브라우저 크기를 조정할 때마다 크기를 조정하고 다시 그려야합니다.

덜 복잡한 솔루션은 자바 스크립트 변수로 드로어 블 치수를 유지하지만 screen.width, screen.height 치수를 기반으로 캔버스 치수를 설정하는 것입니다. CSS를 사용하여 다음을 수행하십시오.

#containingDiv { 
  overflow: hidden;
}
#myCanvas {
  position: absolute; 
  top: 0px;
  left: 0px;
}

브라우저 창은 일반적으로 화면 자체보다 크지 않습니다 (일치하지 않는 듀얼 모니터에서와 같이 화면 해상도가 잘못보고되는 경우는 제외). 배경이 표시되지 않고 픽셀 비율이 변하지 않습니다. CSS를 사용하여 캔버스의 크기를 조정하지 않는 한 캔버스 픽셀은 화면 해상도에 정비례합니다.

— 저지
소스
7
CSS로 캔버스 크기를 조정하는 것은 번거 롭습니다. 적어도 Chrome 및 Safari에서 마우스 / 터치 이벤트 위치는 캔버스 픽셀 위치와 1 : 1에 해당하지 않으므로 좌표 시스템을 변환해야합니다.
— jerseyboy
14

위의 @jerseyboy 솔루션에 추가 된 순수한 CSS 접근법.
Firefox (v29에서 테스트), Chrome (v34에서 테스트) 및 Internet Explorer (v11에서 테스트)에서 작동합니다.

<!DOCTYPE html>
<html>
    <head>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        canvas {
            background-color: #ccc;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            ctx.fillRect(25,25,100,100);
            ctx.clearRect(45,45,60,60);
            ctx.strokeRect(50,50,50,50);
        }
    </script>
</body>
</html>

예제 링크 : http://temporaer.net/open/so/140502_canvas-fit-to-window.html

그러나 @jerseyboy가 언급 한대로주의하십시오.

CSS로 캔버스 크기를 조정하는 것은 번거 롭습니다. 적어도 Chrome 및 Safari에서 마우스 / 터치 이벤트 위치는 캔버스 픽셀 위치와 1 : 1에 해당하지 않으므로 좌표 시스템을 변환해야합니다.

— 볼커 E.
소스
5
CSS 방식은 캔버스를 늘리므로 렌더링 된 이미지가 늘어납니다. 캔버스 크기를 조정할 때와 비교하여 좋지 않습니다. 조금만 조정하면 Craig의 대답이 가장 효과적입니다.
— Nayan
부모 너비를 기준으로 캔버스를 100 %로 만들기 때문에이 솔루션을 좋아합니다.
— Maihan Nijat 2014 년
9 
function resize() {

    var canvas = document.getElementById('game');
    var canvasRatio = canvas.height / canvas.width;
    var windowRatio = window.innerHeight / window.innerWidth;
    var width;
    var height;

    if (windowRatio < canvasRatio) {
        height = window.innerHeight;
        width = height / canvasRatio;
    } else {
        width = window.innerWidth;
        height = width * canvasRatio;
    }

    canvas.style.width = width + 'px';
    canvas.style.height = height + 'px';
};

window.addEventListener('resize', resize, false);
— 페트르
소스
니스, 비율이 중요한 경우
— sarkiroka
8

캔버스가 이미지 데이터를 자동으로 업 스케일하기를 원치 않는 한 (James Black의 답변이 말하지만 그다지 좋지는 않습니다), 직접 크기를 조정하고 이미지를 다시 그려야합니다. 캔버스 중심

— 니콜라이
소스
4

귀하의 div가 웹 페이지를 완전히 채우면 해당 div를 채우고 div를 채우는 캔버스를 가질 수 있습니다.

css를 사용하여 백분율을 사용해야 할 수도 있기 때문에 흥미로운 점이 있지만 사용중인 브라우저 및 사양과 일치하는 정도에 따라 다릅니다. http://www.whatwg.org/ specs / web-apps / current-work / multipage / the-canvas-element.html # the-canvas-element

canvas 요소의 고유 치수는 좌표 공간의 크기와 같으며 숫자는 CSS 픽셀로 해석됩니다. 그러나 스타일 시트를 사용하여 요소 크기를 임의로 지정할 수 있습니다. 렌더링하는 동안 이미지는이 레이아웃 크기에 맞게 조정됩니다.

div의 offsetWidth와 height를 얻거나 window height / width를 가져 와서 픽셀 값으로 설정해야 할 수 있습니다.

— 제임스 블랙
소스
3

CSS

body { margin: 0; } 
canvas { display: block; }

자바 스크립트

window.addEventListener("load", function()
{
    var canvas = document.createElement('canvas'); document.body.appendChild(canvas);
    var context = canvas.getContext('2d');

    function draw()
    {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
        context.moveTo(0, 0); context.lineTo(canvas.width, canvas.height); 
        context.moveTo(canvas.width, 0); context.lineTo(0, canvas.height); 
        context.stroke();
    }
    function resize()
    {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        draw();
    }
    window.addEventListener("resize", resize);
    resize();
});
— 마틴 원케
소스
3

가로 세로 비율을 유지하고 순수한 CSS (가로 세로 비율로 제공)에서 그렇게하려면 다음과 같이 할 수 있습니다. 키는 인 padding-bottom상의 ::content크기 요소 container요소를. 이것은 부모의 너비를 기준으로 크기가 정해 100%지며 기본적 으로 크기가 결정 됩니다. 여기에 지정된 비율은 canvas요소 의 크기 비율과 일치해야합니다 .

// Javascript

var canvas = document.querySelector('canvas'),
    context = canvas.getContext('2d');

context.fillStyle = '#ff0000';
context.fillRect(500, 200, 200, 200);

context.fillStyle = '#000000';
context.font = '30px serif';
context.fillText('This is some text that should not be distorted, just scaled', 10, 40);
/*CSS*/

.container {
  position: relative; 
  background-color: green;
}

.container::after {
  content: ' ';
  display: block;
  padding: 0 0 50%;
}

.wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

canvas {
  width: 100%;
  height: 100%;
}
<!-- HTML -->

<div class=container>
  <div class=wrapper>
    <canvas width=1200 height=600></canvas>  
  </div>
</div>
스 니펫 확장

— mrmcgreg
소스
2

jQuery를 사용하면 jQuery를 사용하여 창 크기 조정을 추적하고 캔버스 너비를 변경할 수 있습니다.

그런 것

$( window ).resize(function() {
 		$("#myCanvas").width($( window ).width())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
스 니펫 확장

— 라파엘 안드라데
소스
1 
(function() {

    // get viewport size
    getViewportSize = function() {
        return {
            height: window.innerHeight,
            width:  window.innerWidth
        };
    };

    // update canvas size
    updateSizes = function() {
        var viewportSize = getViewportSize();
        $('#myCanvas').width(viewportSize.width).height(viewportSize.height);
        $('#myCanvas').attr('width', viewportSize.width).attr('height', viewportSize.height);
    };

    // run on load
    updateSizes();

    // handle window resizing
    $(window).on('resize', function() {
        updateSizes();
    });

}());
— 로커
소스
0

나는 이것이 우리가 정확히해야 할 일이라고 생각합니다 : http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games/

function resizeGame() {
    var gameArea = document.getElementById('gameArea');
    var widthToHeight = 4 / 3;
    var newWidth = window.innerWidth;
    var newHeight = window.innerHeight;
    var newWidthToHeight = newWidth / newHeight;

    if (newWidthToHeight > widthToHeight) {
        newWidth = newHeight * widthToHeight;
        gameArea.style.height = newHeight + 'px';
        gameArea.style.width = newWidth + 'px';
    } else {
        newHeight = newWidth / widthToHeight;
        gameArea.style.width = newWidth + 'px';
        gameArea.style.height = newHeight + 'px';
    }

    gameArea.style.marginTop = (-newHeight / 2) + 'px';
    gameArea.style.marginLeft = (-newWidth / 2) + 'px';

    var gameCanvas = document.getElementById('gameCanvas');
    gameCanvas.width = newWidth;
    gameCanvas.height = newHeight;
}

window.addEventListener('resize', resizeGame, false);
window.addEventListener('orientationchange', resizeGame, false);
— 아빈 트 바드와 즈
소스
-2

나는 sketch.js를 사용하고 있으므로 캔버스에 대해 init 명령을 실행 한 후 jquery로 너비와 높이를 변경합니다. 부모 요소를 기준으로 치수를 설정합니다.

$ ( '# DrawCanvas'). sketch (). attr ( 'height', $ ( '# DrawCanvas'). parent (). height ()). attr ( 'width', $ ( '# DrawCanvas'). parent ().폭());

— 모이 스쿨
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.