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>

错误地解析了Cleary的宽度和高度（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>

或

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

无论如何，画布都会减少到300x150。

Answer 1

您必须以像素为单位设置画布的值。您可以将canvas放入div而不是load事件和resize事件，您可以计算父div的实际大小，而不是将其值设置为canvas。你可以使用JQuery。

画布ID裁剪为预定义尺寸

1 个答案: