뷰포트의 HTML5 캔버스 100 % 너비 높이?

해결법

1.브라우저의 크기가 변경되는 경우에도 의미, 항상 캔버스 전체 화면의 폭과 높이를 만들기 위해, 당신은 window.innerHeight 및 window.innerWidth에 캔버스의 크기를 조정하는 기능 내에서 무승부 루프를 실행해야합니다.

브라우저의 크기가 변경되는 경우에도 의미, 항상 캔버스 전체 화면의 폭과 높이를 만들기 위해, 당신은 window.innerHeight 및 window.innerWidth에 캔버스의 크기를 조정하는 기능 내에서 무승부 루프를 실행해야합니다.

예 : http://jsfiddle.net/jaredwilli/qFuDr/

<canvas id="canvas"></canvas>

(function() {
    var canvas = document.getElementById('canvas'),
            context = canvas.getContext('2d');

    // resize the canvas to fill browser window dynamically
    window.addEventListener('resize', resizeCanvas, false);

    function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            /**
             * Your drawings need to be inside this function otherwise they will be reset when 
             * you resize the browser window and the canvas goes will be cleared.
             */
            drawStuff(); 
    }
    resizeCanvas();

    function drawStuff() {
            // do your drawing stuff here
    }
})();

* { margin:0; padding:0; } /* to remove the top and left whitespace */

html, body { width:100%; height:100%; } /* just to be sure these are full screen*/

canvas { display:block; } /* To remove the scrollbars */

즉, 제대로 브라우저의 캔버스 전체 폭과 높이를 만드는 방법이다. 당신은 방금 drawStuff () 함수에서 캔버스에 그리기위한 모든 코드를 삽입해야합니다.

2.당신은 뷰포트 단위 (CSS3)을 시도 할 수 있습니다 :

당신은 뷰포트 단위 (CSS3)을 시도 할 수 있습니다 :
```
canvas { 
  height: 100vh; 
  width: 100vw; 
  display: block;
}
```
3.나는 캔버스 동적으로 창 크기 조정에 따라 크기가 적응해야하는 방법의 더 일반적인 질문에 답변 해 드리겠습니다. 허용 대답은 적절 폭과 높이가 모두 요청했지만, 이는 또한 캔버스의 화면 비율을 변경할 무슨 100 %로 가정하는 경우를 처리합니다. 많은 사용자들이 그대로 화면 비율을 유지하지만, 동시에 캔버스 창 크기 조절에 크기를 조정할 것입니다. 그것은 정확한 질문은 아니지만, 단지 약간 더 일반적인 문맥에 질문을 올려 놓거나 "에 맞는".

나는 캔버스 동적으로 창 크기 조정에 따라 크기가 적응해야하는 방법의 더 일반적인 질문에 답변 해 드리겠습니다. 허용 대답은 적절 폭과 높이가 모두 요청했지만, 이는 또한 캔버스의 화면 비율을 변경할 무슨 100 %로 가정하는 경우를 처리합니다. 많은 사용자들이 그대로 화면 비율을 유지하지만, 동시에 캔버스 창 크기 조절에 크기를 조정할 것입니다. 그것은 정확한 질문은 아니지만, 단지 약간 더 일반적인 문맥에 질문을 올려 놓거나 "에 맞는".

창은 어떤 종횡비 (폭 / 높이)를 가질 것이며, 따라서 캔버스 객체는 것이다. 서로 관련이 두 종횡비는 분명 약이 될해야 한 가지가 얼마나 당신이 원하는, 아니 그 질문에 대한 대답이 "하나 개의 크기는 모두 맞는 없습니다"입니다 - 나는 당신이 수도의 몇 가지 일반적인 경우를 통해 갈거야 필요.

당신에 대해 명확하게해야 할 가장 중요한 것은 다음의 HTML 캔버스 객체는 폭 속성과 높이 속성이 있습니다; 다음, 동일한 오브젝트의 CSS는 폭 및 높이의 속성을 갖는다. 이 두 너비와 높이가 모두 다른 것들에 대한 유용 다르다.

크기 변화의 어느 정도는 달성 할 수 있기 때문에 폭과 높이 속성을 변경하면, 당신은 항상 캔버스의 크기를 변경할 수 있습니다,하지만 당신이 시간을 항상 필요가 없습니다 것이다, 다시 그리기 모든 것을해야하는 하나의 방법이다 CSS의 속성을 통해,이 경우 당신은 캔버스를 다시 그리기하지 않습니다.

난 당신이 창 크기 조정에서 발생 할 수 있습니다 무엇을 4 예를 참조 (전체 화면 캔버스 모든 시작)

1 : 당신은 폭이 100 % 유지하려면, 당신은 화면 비율이 그것이 같이 있고 싶어. 이 경우, 당신은 캔버스를 다시 그릴 필요가 없습니다; 당신은 창 크기 조정 핸들러가 필요하지 않습니다. 당신이 필요하다
```
$(ctx.canvas).css("width", "100%");
```
어디 CTX는 캔버스 컨텍스트입니다. 바이올린 : resizeByWidth

2 : 당신은 체류 100 % 모두 폭과 높이하고자하면 연신 아웃 화상의 효과가 종횡비의 변화 결과를 원한다. 지금, 당신은 여전히 캔버스를 다시 그릴 필요가 없습니다,하지만 당신은 창 크기 조정 핸들러가 필요합니다. 핸들러에서, 당신이 할
```
$(ctx.canvas).css("height", window.innerHeight);
```
바이올린 : messWithAspectratio

3 : 당신은 모두 숙박이 100 %로 너비와 높이를 원하지만 화면 비율의 변화에 대한 답은 이미지를 스트레칭에서 뭔가 다르다. 그럼 당신은 다시 그릴 필요가 있고, 그것을 허용 대답에 설명되는 방식을한다.

바이올린 : 다시 그리기

4 : 당신은 페이지로드에 100 % 수 있지만 (이후 창 크기를 조정하려면 어떤 반응을 일정하게 유지하지하기 위해 폭과 높이를 원한다.

바이올린 : 고정

모든 바이올린의 모드가 설정되어있는 선 (63)을 제외하고, 동일 부호를 갖는다. 당신은 또한 당신이로? 모드 = 다시 그리기, 쿼리 문자열 인수를 통해 모드를 선택할 수있는 경우 로컬 컴퓨터에서 실행하는 바이올린 코드를 복사 할 수 있습니다

4.http://jsfiddle.net/mqFdk/10/

http://jsfiddle.net/mqFdk/10/

<!DOCTYPE html>
<html>
<head>
    <title>aj</title>
</head>
<body>

    <canvas id="c"></canvas>

</body>
</html>

CSS와

body { 
       margin: 0; 
       padding: 0
     }
#c { 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     overflow: hidden
   }

5.나도이 질문에 대한 답을 찾아보고했지만, 허용 대답은 나를 위해 파괴되었다. 분명히 window.innerWidth를 사용하여 이식 할 수 없습니다. 그것은 일부 브라우저에서 작동하지 않습니다,하지만 난 파이어 폭스가 그것을 좋아하지 않았다 나타났습니다.

나도이 질문에 대한 답을 찾아보고했지만, 허용 대답은 나를 위해 파괴되었다. 분명히 window.innerWidth를 사용하여 이식 할 수 없습니다. 그것은 일부 브라우저에서 작동하지 않습니다,하지만 난 파이어 폭스가 그것을 좋아하지 않았다 나타났습니다.

그레그 타바레스는이 문제를 직접 여기에 주소를 훌륭한 자원을 게시 : http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html ( '안티 패턴 #을 참조하십시오 3, 4 S).

대신 window.innerWidth의 canvas.clientWidth를 사용하면 잘 작동하는 것 같다.

여기 그레그의 루프를 렌더링 제안입니다 :
```
function resize() {
  var width = gl.canvas.clientWidth;
  var height = gl.canvas.clientHeight;
  if (gl.canvas.width != width ||
      gl.canvas.height != height) {
     gl.canvas.width = width;
     gl.canvas.height = height;
     return true;
  }
  return false;
}

var needToRender = true;  // draw at least once
function checkRender() {
   if (resize() || needToRender) {
     needToRender = false;
     drawStuff();
   }
   requestAnimationFrame(checkRender);
}
checkRender();
```

6.(운동 에너지의 대답에 확장)

(운동 에너지의 대답에 확장)

스타일 캔버스는 몸을 채우기 위해. 캔버스에 렌더링 할 때 계정으로 크기를 가지고.

http://jsfiddle.net/mqFdk/356/

<!DOCTYPE html>
<html>
<head>
    <title>aj</title>
</head>
<body>

    <canvas id="c"></canvas>

</body>
</html>

CSS :

body { 
       margin: 0; 
       padding: 0
     }
#c { 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     overflow: hidden
   }

자바 스크립트 :

function redraw() {
    var cc = c.getContext("2d");
    c.width = c.clientWidth;
    c.height = c.clientHeight;
    cc.scale(c.width, c.height);

    // Draw a circle filling the canvas.
    cc.beginPath();
    cc.arc(0.5, 0.5, .5, 0, 2*Math.PI);
    cc.fill();
}

// update on any window size change.
window.addEventListener("resize", redraw);

// first draw
redraw();

7.휴대폰의 경우, 그것을 사용하는 것이 좋습니다

휴대폰의 경우, 그것을 사용하는 것이 좋습니다
```
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
```
그것은 orientation.The "뷰포트"를 변경 한 후 잘못 표시 때문에 portrait.See 전체에 방향을 변경할 때 증가합니다 예

from https://stackoverflow.com/questions/4288253/html5-canvas-100-width-height-of-viewport by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 미디어 쿼리와 같은 $ (창) .width () 동일하지 (0)	2020.10.20
[JQUERY] 어떻게 자바 스크립트에서 창 크기 조정 이벤트를 트리거하기 위해? (0)	2020.10.20
[JQUERY] DIV ID로 스크롤 부드러운 jQuery를 (0)	2020.10.20
[JQUERY] 조건과 일치하는, 어레이 내부의 객체의 인덱스를 얻기 (0)	2020.10.20
[JQUERY] jQuery를 removeClass 와일드 카드 (0)	2020.10.20

복붙노트

[JQUERY] 뷰포트의 HTML5 캔버스 100 % 너비 높이?

뷰포트의 HTML5 캔버스 100 % 너비 높이?

해결법

1.브라우저의 크기가 변경되는 경우에도 의미, 항상 캔버스 전체 화면의 폭과 높이를 만들기 위해, 당신은 window.innerHeight 및 window.innerWidth에 캔버스의 크기를 조정하는 기능 내에서 무승부 루프를 실행해야합니다.

2.당신은 뷰포트 단위 (CSS3)을 시도 할 수 있습니다 :

4.http://jsfiddle.net/mqFdk/10/

6.(운동 에너지의 대답에 확장)

7.휴대폰의 경우, 그것을 사용하는 것이 좋습니다

'JQUERY' 카테고리의 다른 글

티스토리툴바