javascript - 为什么我的 Fabric.js Canvas 不起作用？

Question

JSFiddle 链接:http://jsfiddle.net/UTf87/出于某种原因，我的 Canvas 不会显示它应该显示的矩形，知道为什么吗？

HTML:

<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');