如何使用fabric.js 进行绘制？ [关闭]答案

【问题标题】：How to draw using fabric.js? [closed]如何使用fabric.js 进行绘制？ [关闭]
【发布时间】：2014-12-03 03:04:33
【问题描述】：

我刚开始使用fabric.js，我想画点东西，但是我应该把这段代码放在哪里？

这是来自http://fabricjs.com/fabric-intro-part-1/的教程代码

// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c');

// create a rectangle object
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20
});

// "add" rectangle onto canvas
canvas.add(rect);

我尝试输入<html>-<body>-<script> 但是当我在浏览器中打开时，我看不到任何矩形。我该怎么办？？？

【问题讨论】：

你把它放在
你是否包含了 fabric.js 本身？控制台有错误吗？
嗯..你能检查我的代码吗？？..很短
我把
fabric.js 是否从与 html 文件相同的文件夹加载，如所示？

标签： javascript html canvas fabricjs

【解决方案1】：

试试这个：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fabric</title>
    <script src="fabric.min.js"></script>
</head>
<body>
    <canvas id="c"></canvas>
    <script>
        // create a wrapper around native canvas element (with id="c")
        var canvas = new fabric.Canvas('c');

        // create a rectangle object
        var rect = new fabric.Rect({
            left: 100,
            top: 100,
            fill: 'red',
            width: 20,
            height: 20
        });

        // "add" rectangle onto canvas
        canvas.add(rect);   
    </script>   
</body>
</html>

如果不工作，那么你的浏览器不支持<canvas>。

【讨论】：

哦，它有效！非常感谢