javascript - 为什么我的 Fabric.js 画布无法工作？

Question

JSFiddle 的链接：http: //jsfiddle.net/UTf87/ 由于某种原因，我的画布不会显示它应该显示的矩形，有什么线索吗？

hmtl:

<div id="CanvasContainer">
    <canvas id="Canvas"></canvas>
</div>

CSS：

#CanvasContainer {
    float: left;
    width: 270px;
    height: 519px;
    margin-left: 15px;
    background: black;
}
#Canvas {
    float: left;
    overflow: hidden;
    background: green;
}

javascript:

window.onload = function () {
    var canvas = new fabric.Canvas('CanvasContainer');
    var rect = new fabric.Rect({
        left: 100,
        top: 100,
        fill: 'red',
        width: 20,
        height: 20,
        angle: 45
    });
    canvas.add(rect);
}

Answer 1

http://jsfiddle.net/bGRCL/

var canvas = new fabric.Canvas('Canvas');
var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 20,
    height: 20,
    angle: 45
});
canvas.add(rect);

由于选择了 jsfiddle 选项，因此不需要您的 window.onload，因此从未调用过该函数。

此外，您选择的是 CanvasContainer 而不是 Canvas 本身。代替 ：

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

利用：

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