캔버스를 부모만큼 넓고 높이 만들기

진행률 표시 줄을 시뮬레이션하기 위해 직사각형 캔버스를 만들고 싶지만 캔버스의 너비와 높이를 100 %로 설정하면 실제로 부모만큼 높고 넓지 않은 것 같습니다.

http://jsfiddle.net/PQS3A/ 아래의 예를 참조하십시오.

정사각형이 아닌 캔버스를 만드는 것도 가능합니까? 캔버스의 높이와 너비는 모바일 장치를 포함하여 더 크거나 작은 화면에서 볼 때 동적으로 변경되어야하기 때문에 하드 코딩하고 싶지 않습니다.

다음은 문제를 해결하는 작업 예제입니다.

http://jsfiddle.net/PQS3A/7/

예제에 몇 가지 문제가 있습니다.

1. A <div>에는 height또는 width속성 이 없습니다 . CSS를 통해 설정해야합니다.
2. div의 크기가 올바르게 조정 되었더라도 default를 사용했습니다 position:static. 이는 자식의 위치 지정 부모가 아님을 의미합니다. 캔버스 크기를 div와 동일하게하려면 div를 position:relative(또는 absolute또는 fixed) 로 설정해야합니다 .
3. 캔버스 의 width및 height속성은 그릴 데이터의 픽셀 수 (예 : 이미지의 실제 픽셀) 를 지정하며 캔버스 의 표시 크기 와는 별개입니다 . 이러한 속성은 정수로 설정해야합니다.

위에 링크 된 예제는 CSS를 사용하여 div 크기를 설정하고 배치 된 상위로 만듭니다. 캔버스를 배치 된 부모 와 동일한 디스플레이 크기로 설정하는 JS 함수 (아래 참조)를 만든 다음 표시 되는 것과 동일한 픽셀 수를 갖도록 내부 width및 height속성 을 조정합니다 .

var canvas = document.querySelector('canvas');
fitToContainer(canvas);

function fitToContainer(canvas){
  // Make it visually fill the positioned parent
  canvas.style.width ='100%';
  canvas.style.height='100%';
  // ...then set the internal size to match
  canvas.width  = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
}

캔버스가 실제로 부모 요소만큼 크도록하려면 캔버스 의 width및 height속성을 사용하십시오 . JQuery를 사용하여 설정할 수 있습니다 .

$(document).ready(function() {
  var canvas = document.getElementById("theCanvas");
  canvas.width = $("#parent").width();
  canvas.height = $("#parent").height();
});

JQuery를 모르는 경우 다음 Javascript를 사용하십시오.

var canvas = document.getElementById("theCanvas");
var parent = document.getElementById("parent");
canvas.width = parent.offsetWidth;
canvas.height = parent.offsetHeight;

css높이 및 너비 속성 을 사용하는 경우 style="width:100%; height:100%;"캔버스를 늘리는 것입니다. 이렇게하면 캔버스에 그리는 모든 것이 늘어난 것처럼 보입니다.

JQuery 솔루션 용 JSFiddle .

자바 스크립트 솔루션을위한 JSFiddle .

태그의 속성 대신 CSS 속성을 사용합니다.

<div style="background-color:blue;width:140px;height:20px">
    <canvas style="background-color: red;width:100%;height:100%">
    </canvas>
</div>​

작동하는 것 같습니다