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

为什么我的Fabric.js画布不起作用？

1 个答案: