javascript - 如何从fabric.js开始 - Thinbug

如何从fabric.js开始

时间：2013-07-22 03:50:22

标签： javascript canvas fabricjs

我是学习JS的初学者。现在我遇到一个问题，从`fabric.js`开始需要你的帮助。

<!DOCTYPE HTML>
<html>
<head>
    <title>fabric_test</title>
    <script type="text/javascript" src="all.js"></script>
</head>
<body>
    <canvas id="canvas" width="512" height="512" style="background-color: rgb(222, 222, 222)">
        Your browser does not support canvas tag!
    </canvas>
    <script type="text/javascript">
        var canvas = new fabric.Canvas('canvas');
        // 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>

我的问题是：

当我打开已保存的html文件时，为什么矩形不会在画布上绘制？
我下载的结构是一个包含多个文件夹和文件的文件夹。我只是将all.js文件复制到当前位置。这是对的吗？

2 个答案:

答案 0 :(得分：1)

导致此问题的原因是您在画布对象中放置了背景。因此，颜色在内部元素上。从画布中删除背景样式。

答案 1 :(得分：0)

下载结构zip文件时，在提取时你应该找到一个文件夹fabric.js-1.4.4 / dist从那里复制fabric.js文件或fabric.min.js文件并包含它而不是全部.js让我知道这是否有效