HTML5 캔버스가 부모 크기로 조정됩니다.

예를 들어 <body> ("전체 화면")인지 일부 <div>인지 여부에 상관없이 캔버스 요소의 크기를 조정하여 부모에 맞도록합니다. 이것은 내 시도입니다 :HTML5 캔버스가 부모 크기로 조정됩니다.

// called at each frame 
function update() { 
    var canvasNode = document.getElementById('mycanvas'); 
    canvasNode.width = canvasNode.parentNode.clientWidth; 
    canvasNode.height = canvasNode.parentNode.clientHeight; 
}

어떤 이유로 캔버스가 성장을 멈추지 않습니다! 어쩌면 client*이 올바른 매개 변수가 아닌가?

여기 행동의 코드를 참조하십시오 : http://jsfiddle.net/ARKVD/24/

출처

2011-12-24 Giovanni Funchal

캔버스가 '155px'이면 바디가'160px' 높이이므로 매번 캔버스가'5px '증가합니다. 캔버스가 커질 때마다 몸체가'5px '앞에 오게됩니다. 왜 모든 마진/패딩을 '0px'로 설정했는지 모르겠다. (Chrome에 있습니다.) – pimvdb

Linux/Firefox에서 4px 또는 3px 오프셋 (내 윈도우가 최대화되어 있는지 여부에 따라 다름)이 표시됩니다 ... 성가신 듯! –

이상한 것은, 캔버스가'0px'의 높이로 설정되면, 몸체는'20px' 높이입니다. 캔버스가 실제로 제거 된 경우에만 본문이 '0px'로 축소됩니다. – pimvdb

가장 쉬운 것은 할 수는 항상 자신의 사업부에서 캔버스를 유지하는 것입니다.

이 div에있을 수있는 유일한 것은 캔버스입니다.

그런 다음 CSS를 사용하여 div의 크기를 조정할 수 있습니다. 시체만큼 컸 으면 좋겠어? div width: 100%을 제공하십시오.

그런 다음 당신은 항상 정당하게 수행 할 수 있습니다

canvas.width = theDiv.clientWidth; 
canvas.height = theDiv.clientHeight;

당신이 몸이 사업부의 직접적인 부모가 때 현재 직면하고있는 이상한 문제에 대해 걱정할 필요가 없습니다 이렇게 할 경우.

출처

2011-12-24 19:01:30

몸에서 왜 작동하지 않는지 설명 할 수 있습니까 (즉, 왜 DIV가 필요한가?). –

div가있는 본문만큼 크고 싶다면 CSS로 너비와 높이를 지정할 수 있기 때문에 (100 % 너비 등) 쉽게 만듭니다. 100 % 너비가 반드시 body의'clientWidth'만큼 큰 것은 아닙니다. 대신 CSS 스펙에서 호출되는 "포함 블록"만큼 크며, 이는 body의 clientWidth 및 Height와는 다릅니다 (작음). 다음으로 시작하십시오 : http://jsfiddle.net/9FyNZ/ –

감사합니다! 이것은 내가 가지고 있었던 매우 성가신 문제를 해결했다. – Brad

나는 같은 문제가 발생하는 것을 발견했고, 해결할 수있는 유일한 방법은 캔버스 높이를 parentHeight - 1로 설정하는 것이 었습니다. 이것은 CEF를 사용하고있었습니다. this 바이올린에서 나는 parentHeight로 설정했다 - 5.

canvasNode.height = div.clientHeight - 5;

출처

2014-09-29 10:04:45 Sam

당신은 부모 노드와 자식 노드 사이의 순환 종속성을 위반하여 문제를 해결할 수 있습니다. DOM 요소의 크기 할당은 위에서 아래로 (부모에서 자식으로) 전파되어야합니다. 당신은 자식 요소 (캔버스)이 부모의 독립적 인 자신의 문서 흐름에 넣는다

canvasNode.style.position = 'absolute';

을 설정하여 부모의 크기에 영향을 미치지 않도록 할 수 있습니다.

출처

2017-07-25 21:19:05 Imran

내가 가장 깨끗한 방법은 간단하게는 크기 조정에 따라해야하는데 얼마나 큰 캔버스 요소를 "생각 나게"하는 것으로 나타났습니다 :

window.onresize = function() { 
    canvas.style.width = '100%'; 
    canvas.height = canvas.width * .75; 
}

이 경우 설정 높이가 단순히 4를 유지하는 것입니다 : 3 비율. 물론 원하는대로 100 % 만들 수 있습니다.

출처

2017-11-09 23:24:07

HTML5 캔버스가 부모 크기로 조정됩니다.

답변

관련 문제