为什么我的 Fabric.js 画布无法工作？答案

【问题标题】：Why won't my Fabric.js canvas work?为什么我的 Fabric.js 画布无法工作？
【发布时间】：2013-11-28 02:47:04
【问题描述】：

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

【问题讨论】：

我看到一个绿色矩形...你看到的是什么？
你知道 Fabricjs 是什么吗？应该在左 100 上 100 处有一个红色矩形，您可以拖动、缩放和旋转。代码一定有问题，因为我之前已经把它放到 wokr 上

标签： javascript jquery css canvas fabricjs

【解决方案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');

【讨论】：

如果您正在更新或分叉，网址会发生变化，请确保您提供更新后的网址。
让我们continue this discussion in chat
您可能想对您的编程进行更多了解，这里的问题超出了这个问题的范围。您正在使用 jquery 代码，但尚未包含 jquery 源代码。
我有，只是小提琴不想要标题..这里是一切的链接。 jsfiddle.net/a7ZSG/9sry 这么无视