Question

我刚开始使用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> 但是当我在浏览器中打开时，我看不到任何矩形。我该怎么办???

Answer 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>。

如何使用fabric.js绘制？

1 个答案: