Question

我正在尝试将两个画布分层，以便一个有背景图像而另一个可以有不同的图像。当我将它们分层时，宽度和高度将重置为画布的默认300x150px，而不是考虑我放入的宽度/高度。具有＆＃39; c＆＃39;的画布是我的顶层

这是我的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设置大小：

Size of HTML5 Canvas via CSS versus element attributes

分层HTML5画布高度/宽度重置为300x150像素

1 个答案: