分層HTML5畫布的高度/寬度重置為300x150px

Question

我正在嘗試對兩個畫布進行分層，以便其中一個具有背景圖像，而另一個可以在其上具有不同的圖像。 當我對其進行分層時，其寬度和高度將重置為畫布的默認300x150px，而不是考慮我放入的寬度/高度。ID為'c'的畫布是我的頂層

這是我的HTML：

<div class="col-md-6">
            <div style="position:relative; border:1px solid">
                <canvas id="b" style="position:absolute; left:0; top:0; z-index:1; width:640px; height:429px;"></canvas>
                <canvas id="c" style="position:absolute; left:0; top:0; z-index:2; width:640px; height:429px;"></canvas>
</div>

我正在使用fabric.js創建畫布，如下所示：

var canvasb = new fabric.Canvas('b');
canvasb.setBackgroundImage('imgs/mybackgroundimage.png', canvasb.renderAll.bind(canvasb));

var canvas = new fabric.Canvas('c');

Answer 1

我不確定您可以在樣式部分中設置寬度和高度，為什么不嘗試這種方式呢？

<canvas id="b" width="640" height="429" style="position:absolute; left:0; top:0; z-index:1;"></canvas> 

（參考： http : //www.w3schools.com/html/html5_canvas.asp ）

另外，此參考對於區分通過屬性設置大小和CSS可能有用：

通過CSS的HTML5 Canvas大小與元素屬性