진행률 표시 줄을 시뮬레이션하기 위해 직사각형 캔버스를 만들고 싶지만 캔버스의 너비와 높이를 100 %로 설정하면 실제로 부모만큼 높고 넓지 않은 것 같습니다.
http://jsfiddle.net/PQS3A/ 아래의 예를 참조하십시오.
정사각형이 아닌 캔버스를 만드는 것도 가능합니까? 캔버스의 높이와 너비는 모바일 장치를 포함하여 더 크거나 작은 화면에서 볼 때 동적으로 변경되어야하기 때문에 하드 코딩하고 싶지 않습니다.
답변
다음은 문제를 해결하는 작업 예제입니다.
http://jsfiddle.net/PQS3A/7/
예제에 몇 가지 문제가 있습니다.
- A
<div>에는height또는width속성 이 없습니다 . CSS를 통해 설정해야합니다. - div의 크기가 올바르게 조정 되었더라도 default를 사용했습니다
position:static. 이는 자식의 위치 지정 부모가 아님을 의미합니다. 캔버스 크기를 div와 동일하게하려면 div를position:relative(또는absolute또는fixed) 로 설정해야합니다 . - 캔버스 의
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>
