裁剪爲預定義尺寸的畫布ID

我畫一些畫布，但什麼是錯的代碼，我有：

<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期待：在像素值），但不知何故畫布上在他們的全方位繪製。相反，如果我使用類似：

<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不管。

來源

2016-09-15 user217354

您必須以像素爲單位設置畫布的值。您可以將canvas放入div中，而不是在加載事件中調整大小，您可以計算父div的實際大小，而不是將其值設置爲canvas。你可以使用JQuery。

來源

2016-09-15 10:51:38

該問題似乎與「位置：絕對」有關。如果我刪除了這個特徵，那麼這些畫布尊重這個維度，但是我失去了這個疊加特徵。我如何解決它？ @Ivan Mjartan – user217354

基本上，尺寸300x150是Firefox的默認尺寸。看到這裏http://jsfiddle.net/ecTCD/87/和這裏http://jsfiddle.net/ecTCD/91/與位置的差異：絕對。有什麼想法？ – user217354

我的建議是讓它成爲絕對的，並在事件發生時改變大小。當你這樣做時，所有的繪圖消失。所以在調整大小之後，您必須重繪所有內容。要優化調整大小的動作，只需使用信號量（布爾值是調整大小）和延遲100ms或更長的定時器。每次調整大小事件都會重置您的時間，並在用戶完成調整大小時吸取一些東西如果你有很多想法來繪製它，比起onresize事件將屏幕外畫布繪製爲可見的畫布更好的方法來創建離屏畫布。 –

裁剪爲預定義尺寸的畫布ID

回答

相關問題