Canvas ID가 미리 정의 된 크기로 자릅니다.

Question

저는 현재 js 프로젝트에서 작업하고 있습니다.

좀 캔버스 그리기있어하지만 뭔가 코드에 문제가 있습니다 난이 :

<div id="canvasesdiv" style="height: 100%; width: 100%; display: table-cell; position: relative; width:578px; height:415.5px"> 
    <canvas id="c1"  style="z-index: 1; position:absolute; left: 80px; width="680" height="435"></canvas> 
    <canvas id="c2"  style="z-index: 2; position:absolute; left: 80px; width="680" height="435"></canvas> 
    <canvas id="c3"  style="z-index: 3; position:absolute; left: 80px; width="680" height="435"></canvas> 
    <canvas id="c4"  style="z-index: 4; position:absolute; left: 80px; width="680" height="435"></canvas> 
    <canvas id="c5"  style="z-index: 5; position:absolute; left: 80px; width="680" height="435"></canvas> 
</div> 

클리 어리 너비와 높이 (HTML 기대된다와 PX의 값) 잘못 해석되지만 어떻게 든 캔버스는 그들의 전체 차원에서 그려집니다.

<canvas id="c1"  style="z-index: 1; position:absolute; left: 80px; "></canvas> 
<canvas id="c2"  style="z-index: 2; position:absolute; left: 80px; "></canvas> 
<canvas id="c3"  style="z-index: 3; position:absolute; left: 80px; "></canvas> 
<canvas id="c4"  style="z-index: 4; position:absolute; left: 80px; "></canvas> 
<canvas id="c5"  style="z-index: 5; position:absolute; left: 80px; "></canvas> 

또는 캔버스가 전혀없이 아래로 300x150으로 잘립니다되지 않습니다

... width: 500px; height: 500px;" 

와 : 내가 좋아하는 뭔가를 사용하는 대신 경우 .

Answer 1

캔버스의 값을 픽셀 단위로 설정해야합니다. 당신은 canvas를 load 이벤트와 resize 이벤트보다 div에 넣을 수 있습니다. 부모 div의 실제 크기는 캔버스에 값을 설정하는 것보다 더할 수 있습니다. JQuery를 사용할 수 있습니다.