HTML5 캔버스 뷰포트의 너비 100% 높이?
뷰포트의 너비와 높이의 100%를 차지하는 캔버스 요소를 만들려고 합니다.
여기 예를 보시면 Chrome과 FireFox에서 스크롤 바를 추가하고 있습니다.추가 스크롤 바를 방지하고 캔버스 크기로 창의 너비와 높이만 정확히 제공하려면 어떻게 해야 합니까?
항상 캔버스 전체 화면 너비와 높이를 만들려면 브라우저 크기가 조정된 경우에도 캔버스 크기를 다음으로 조정하는 기능 내에서 그리기 루프를 실행해야 합니다.window.innerHeight그리고.window.innerWidth.
예: http://jsfiddle.net/jaredwilli/qFuDr/
HTML
<canvas id="canvas"></canvas>
자바스크립트
(function() {
const canvas = document.getElementById('canvas');
const 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
}
})();
CSS
* { 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()기능.
뷰포트 장치(CSS3)를 사용해 볼 수 있습니다.
canvas {
height: 100vh;
width: 100vw;
display: block;
}
창 크기를 조정할 때 캔버스의 크기를 동적으로 조정하는 방법에 대한 보다 일반적인 질문에 답하겠습니다.수용된 답변은 폭과 높이가 모두 100%로 요구되는 경우를 적절하게 처리하지만 캔버스의 가로 세로 비율도 변경됩니다.많은 사용자가 가로 세로 비율은 그대로 유지하면서 창 크기만 조정하기를 원할 것입니다.이것은 정확한 질문이 아니라, 단지 질문을 좀 더 일반적인 맥락에 넣었을 뿐입니다.
창에는 가로/세로 비율(가로/높이)이 있고 캔버스 개체도 마찬가지입니다.이 두 가지 측면의 비율이 서로 어떻게 연관되기를 바라는지는 한 가지 분명히 해야 할 것입니다. 이 질문에 대한 "하나의 크기가 모두 들어맞는" 대답은 없습니다. 여러분이 원하는 것에 대한 몇 가지 일반적인 경우를 살펴보도록 하겠습니다.
가장 중요한 것은 html 캔버스 개체는 너비 속성과 높이 속성을 가지고 있으며, 같은 개체의 CSS도 너비와 높이 속성을 가지고 있습니다.그 두 폭과 높이가 다르고, 둘 다 다른 것에 유용합니다.
너비 및 높이 특성을 변경하는 것은 캔버스의 크기를 항상 변경할 수 있는 한 가지 방법이지만, CSS 특성을 통해 어느 정도의 크기 변경을 수행할 수 있으므로 모든 것을 다시 칠해야 하며, 이 경우 캔버스를 다시 그릴 필요가 없습니다.
창 크기 조정 시 발생할 수 있는 4가지 경우가 보입니다(모두 전체 화면 캔버스로 시작).
1: 너비를 100%로 유지하고 가로 세로 비율을 원래대로 유지합니다.이 경우 캔버스를 다시 그릴 필요가 없으며 창 크기 조정기도 필요 없습니다.필요한 건
$(ctx.canvas).css("width", "100%");
여기서 ctx는 캔버스 컨텍스트입니다.fiddle: 너비별 크기 조정
2: 너비와 높이를 모두 100%로 유지하고 그 결과 가로 세로 비율의 변화가 이미지를 확장하는 효과를 가져오길 원합니다.이제 캔버스를 다시 그릴 필요는 없지만 창 크기 조정기가 필요합니다.핸들러 안에서 당신은
$(ctx.canvas).css("height", window.innerHeight);
fiddle: messWithAspectratio
3: 가로와 세로가 모두 100% 유지되기를 원하지만 가로 세로 비율의 변화에 대한 답은 이미지를 늘리는 것과는 다릅니다.그런 다음 다시 그림을 그리고 합격된 답변에 나와 있는 방식으로 그림을 그려야 합니다.
fiddle: 다시 그리기
4: 페이지 로드 시 너비와 높이를 100%로 하되 이후에는 일정하게 유지할 수 있습니다(창 크기에 대한 반응 없음).
fiddle: 고정
모드가 설정된 63번 라인을 제외하고 모든 바이올린의 코드는 동일합니다.로컬 컴퓨터에서 실행할 피들 코드를 복사할 수도 있습니다. 이 경우 쿼리 문자열 인수를 통해 모드를 ?mode=redraw로 선택할 수 있습니다.
<!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
}
저도 이 질문에 대한 답을 찾고 있었는데, 합격된 답이 깨지고 있었습니다.window.innerWidth는 휴대용이 아닌 것 같습니다.일부 브라우저에서는 작동하지만 파이어폭스가 좋아하지 않는 것을 알게 되었습니다.
Gregg Tavares는 이 문제를 직접적으로 다루는 훌륭한 자료를 여기에 올렸습니다: http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html (반 pattern #'s 3 and 4 참조).
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();
(動靜能量의 대답에 따라 확장)
캔버스를 몸에 채우도록 스타일을 지정합니다.캔버스로 렌더링할 때 크기를 고려합니다.
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();
모바일의 경우 사용하는 것이 좋습니다.
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
방향을 변경한 후 잘못 표시되기 때문입니다.방향을 세로로 변경할 때 "뷰포트"가 늘어납니다.전체 예시 보기
언급URL : https://stackoverflow.com/questions/4288253/html5-canvas-100-width-height-of-viewport
'programing' 카테고리의 다른 글
| C - 계산 시간을 알 수 있습니까? (0) | 2023.10.08 |
|---|---|
| Android에서 사용자 지정 서체 사용 (0) | 2023.10.08 |
| Laravel Expulent: 필드 ID로 배열 키 반환 (0) | 2023.10.08 |
| Spring Framework의 JdbcTemplate 클래스를 사용하여 INSERT 문을 실행하는 방법 (0) | 2023.10.08 |
| cume_dist vs percent_rank 또는 차이 (0) | 2023.10.08 |