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就可以开始开发了。

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

  1. 下载Fabric.js：您可以去Github上下载，也可以在官网下载（http://fabricjs.com/build/）.
  2. 这里推荐在官网进行下载，进入网址后，点击“select all”选择全部，然后点击“Dev build” 进行下载。
  3. 把下载好的fabric.js复制到你的开发目录。
  4. 在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库的更多相关文章

  1. 简单、强大的swig.js

    Swig.js A simple, powerful, and extendable JavaScript Template Engine. 简单概括:JS模板引擎. Why to use 根据路劲渲 ...

  2. 让AI简单且强大：深度学习引擎OneFlow技术实践

    本文内容节选自由msup主办的第七届TOP100summit,北京一流科技有限公司首席科学家袁进辉(老师木)分享的<让AI简单且强大:深度学习引擎OneFlow背后的技术实践>实录. 北京 ...

  3. day7学python 初识简单模板

    初识简单模板 模块与包 1.模块:用来从逻辑上组织python代码(变量,函数,类,逻辑:实现功能),本质是.py结尾的文件 但导入的模块名,无.py 2.包:从逻辑上组织模块,本质就是目录(含有_i ...

  4. Java高级架构师（一）第01节：整体课程概览

    本课程专注于构建:高可扩展性.高性能.大数据量.高并发.分布式的系统架构. 从零开始.全面系统.成体系的软件架构课程,循序渐进的讲述构建上述系统架构所需要的各种技术知识和技能. 适应人群: 1:有一定 ...

  5. 数据库01 /Mysql初识、基本指令、数据库密码相关、创建用户及授权

    数据库01 /Mysql初识.基本指令.数据库密码相关.创建用户及授权 目录 数据库01 /Mysql初识.基本指令.数据库密码相关.创建用户及授权 1. 数据库概述 2. 数据库管理系统/DBMS ...

  6. 006 01 Android 零基础入门 01 Java基础语法 01 Java初识 06 使用Eclipse开发Java程序

    006 01 Android 零基础入门 01 Java基础语法 01 Java初识 06 使用Eclipse开发Java程序 Eclipse下创建程序 创建程序分为以下几个步骤: 1.首先是创建一个 ...

  7. 003 01 Android 零基础入门 01 Java基础语法 01 Java初识 03 Java程序的执行流程

    003 01 Android 零基础入门 01 Java基础语法 01 Java初识 03 Java程序的执行流程 Java程序长啥样? 首先编写一个Java程序 记事本编写程序 打开记事本 1.wi ...

  8. 002 01 Android 零基础入门 01 Java基础语法 01 Java初识 02 Java简介

    002 01 Android 零基础入门 01 Java基础语法 01 Java初识 02 Java简介 学习Java的基础语法 Java是一门编程语言,学习的逻辑其实和现实世界的语言是一样的,需要了 ...

  9. (译文)12个简单(但强大)的JavaScript技巧(二)

    原文链接: 12 Simple (Yet Powerful) JavaScript Tips 其他链接: (译文)12个简单(但强大)的JavaScript技巧(一) 强大的立即调用函数表达式 (什么 ...

随机推荐

  1. Myeclipse配置tomcat和jdk

    1.打开Myeclipse,Windows--preference--出现如下窗口.Browse为导入解压的tomcat路径. 2.配置jdk.使用哪个tomcat,就配置哪个tomcat下的jdk, ...

  2. 通过快递100获取快递单号，结合c-lodop热敏纸打印 – 通过菜鸟ISV/自研ERP使用菜鸟电子面单

    https://www.1024cc.cn/index.php/2019/04/29/%E6%89%93%E5%8D%B0%E7%94%B5%E5%AD%90%E9%9D%A2%E5%8D%95/ 打 ...

  3. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

  4. Django form组件 与 cookie/session

    目录 一.form组件 二.cookie.session 返回Django 组件 一.form组件 1.1 以注册功能为例 注册功能 1.渲染前端标签获取用户输入 --> 渲染标签 2.获取用户 ...

  5. RAksmart服务器具备哪些特点？

    美国RAKsmart机房运营多年,前身是提供美国军用服务器业务,拥有着庞大的用户群体和消费者,那RAksmart服务器具备哪些特点呢? 1.美国raksmart服务器特点——硬盘超大 美国raksma ...

  6. delphi 第3课

    (1)主程序:汇总或者记载 Delphi应用程序是以窗体为中心的 (1) 1 (2) 控制语句 if 条件 then 语句1: else 语句2: 2018-04-22   21:47:17

  7. MySQL回滚到某一时刻数据的方法

    MySQL回滚到某一时刻数据的方法       对于有归档日志的数据库来说,原理上都具备全库回滚到之前某一时刻的能力.在这方面最好用的Orale数据库,使用Oracle数据库的RMAN工具,可以方便的 ...

  8. pom parent 标签

    <!--parent用于引用父工程 1.统一管理jar包的版本,其依赖需要在子工程中定义才有效(比如此例) 2.统一的依赖管理(父工程的<dependencies>,子工程不必重新引 ...

  9. 大数据之hadoop小文件存档

    hadoop小文件存档1.HDFS存档小文件弊端 每个文件均按块存储,每个块的元数据存储在NameNode的内存中,因此HDFS存储小文件会非常低效.因为大量的小文件会耗尽NameNode中的大部分内 ...

  10. duilib教程之duilib入门简明教程9.界面布局

    上一个教程实现的标题栏代码中,并没有看到处理自适应窗口大小的代码,但是窗口大小变化后,按钮的位置会跟着变化,这是因为我们将按钮放到了HorizontalLayout.VerticalLayout,这样 ...