javascript - 分层 HTML5 Canvas 高度/宽度重置为 300x150 像素

Question

我正在尝试对两个 Canvas 进行分层，这样一个 Canvas 上有背景图像，另一个 Canvas 上可以有不同的图像。当我将它们分层时，宽度和高度重置为 Canvas 的默认 300x150 像素，而不是尊重我输入的宽度/高度。id 为“c”的 Canvas 是我的顶层

这是我的 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 创建 Canvas ，如下所示:

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

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

Answer 1

我不确定你是否可以在 style 部分设置宽度和高度，你为什么不尝试这种方式:

<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