(转)第01节：初识简单而且强大的Fabric.js库

Fabric.js是一个功能强大和简单Javascript HTML5的canvas库。Fabric提供了很多可以互动的Canvas元素，还在canvas上提供了SVG的语法分析器。

你可以轻松的使用Fabric.js做到下面的操作：

在canvas上创建和填充填充简单的几何图形。
放上一张已经准备好的照片。
作一些有复杂路径组成的图形。
给任何图形填充渐变色。
编辑canvas上文字的大小，对齐方式，字体和其他属性。
对一张图片进行效果叠加，例如变成黑白色，变成偏红色。
进行动画编辑和互动操作。
在canvas上进行移动，缩放你选择的图形。
进行群组编辑。
自由绘画，就像你在纸上绘画一样。
生产JSON或SVG数据，并在你需要的时候进行恢复。

如果你觉的这篇文章满足不了您的需求或者你想了解更多关于Fabric.js的信息，你可以上它的官方网站或者访问Github网址。

Fabric.js的官网地址：http://fabricjs.com

GitHub地址：https://github.com/kangax/fabric.js/

其实Fabric.js的开发环境没有什么特殊要求，它只是一个纯粹的JavaScript库。我们只要下载Fabric.js并像正常引入Javascript就可以开始开发了。

虽然不难，但是我还是给出一个简单的步骤：

下载Fabric.js：您可以去Github上下载，也可以在官网下载（http://fabricjs.com/build/）.
这里推荐在官网进行下载，进入网址后，点击“select all”选择全部，然后点击“Dev build” 进行下载。
把下载好的fabric.js复制到你的开发目录。
在HTML里用<script>标签引入fabric.js库。

我们可以通过画一个简单的正方形来感受一下fabric.js的魅力。

<!DOCTYPE html>

<html lang="en">

    <head>

        <title></title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <script src="../fabric.js"></script>

    </head>

    <body>

    <canvas id="c" width="800" height="800"></canvas>

    <script type="text/javascript">

        var canvas =new fabric.Canvas('c'); //利用fabric找到我们的画布

        var rect = new fabric.Rect({  //创建我们的正方形

            left:100,

            top:100,

            fill:'red',

            width:30,

            height:30

        });

        canvas.add(rect);//把我们创建好的正方形加到画布上

    </script>

    </body>

</html>

巴特西

(转)第01节：初识简单而且强大的Fabric.js库

最新文章

热门文章