(转)第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库的更多相关文章
- 简单、强大的swig.js
Swig.js A simple, powerful, and extendable JavaScript Template Engine. 简单概括:JS模板引擎. Why to use 根据路劲渲 ...
- 让AI简单且强大：深度学习引擎OneFlow技术实践
本文内容节选自由msup主办的第七届TOP100summit,北京一流科技有限公司首席科学家袁进辉(老师木)分享的<让AI简单且强大:深度学习引擎OneFlow背后的技术实践>实录. 北京 ...
- day7学python 初识简单模板
初识简单模板 模块与包 1.模块:用来从逻辑上组织python代码(变量,函数,类,逻辑:实现功能),本质是.py结尾的文件 但导入的模块名,无.py 2.包:从逻辑上组织模块,本质就是目录(含有_i ...
- Java高级架构师（一）第01节：整体课程概览
本课程专注于构建:高可扩展性.高性能.大数据量.高并发.分布式的系统架构. 从零开始.全面系统.成体系的软件架构课程,循序渐进的讲述构建上述系统架构所需要的各种技术知识和技能. 适应人群: 1:有一定 ...
- 数据库01 /Mysql初识、基本指令、数据库密码相关、创建用户及授权
数据库01 /Mysql初识.基本指令.数据库密码相关.创建用户及授权 目录 数据库01 /Mysql初识.基本指令.数据库密码相关.创建用户及授权 1. 数据库概述 2. 数据库管理系统/DBMS ...
- 006 01 Android 零基础入门 01 Java基础语法 01 Java初识 06 使用Eclipse开发Java程序
006 01 Android 零基础入门 01 Java基础语法 01 Java初识 06 使用Eclipse开发Java程序 Eclipse下创建程序 创建程序分为以下几个步骤: 1.首先是创建一个 ...
- 003 01 Android 零基础入门 01 Java基础语法 01 Java初识 03 Java程序的执行流程
003 01 Android 零基础入门 01 Java基础语法 01 Java初识 03 Java程序的执行流程 Java程序长啥样? 首先编写一个Java程序 记事本编写程序 打开记事本 1.wi ...
- 002 01 Android 零基础入门 01 Java基础语法 01 Java初识 02 Java简介
002 01 Android 零基础入门 01 Java基础语法 01 Java初识 02 Java简介 学习Java的基础语法 Java是一门编程语言,学习的逻辑其实和现实世界的语言是一样的,需要了 ...
- (译文)12个简单(但强大)的JavaScript技巧(二)
原文链接: 12 Simple (Yet Powerful) JavaScript Tips 其他链接: (译文)12个简单(但强大)的JavaScript技巧(一) 强大的立即调用函数表达式 (什么 ...
随机推荐
- iOS 7.1的Safari为meta标签新增minimal-ui属性，在网页加载时隐藏地址栏与导航栏
在 iOS 7.1 的 Safari 中为 meta 标签新增 minimal-ui 属性,让网页在加载时便可隐藏顶部的地址栏与底部的导航栏. 如何实现?你只需将“minimal-ui”加入 view ...
- Scala 可变长参数
Scala 允许你指明函数的最后一个参数可以是重复的.这可以允许客户向函数传入可变长度参数列表.想要标注一个重复参数,在参数的类型之后放一个星号. 例如:定义一个可变参数的函数param def pa ...
- jquery实现视频滚动
原理图 <!DOCTYPE html> <html lang="en"> <head> <script src="jquery. ...
- 【Wikioi】P1401 逆序统计 代码
题目链接:http://wikioi.com/solution/list/1401/ 题解链接:http://user.qzone.qq.com/619943612/blog/1377265690 代 ...
- capserjs-prototype(下)
scrollTo() 具体样式: scrollTo(Number x, Number y) New in version 1.1-beta3. Scrolls current document to ...
- List<> ，string[]和string的相互转换
1.string转换成string[]数组 string str = "aaa,bbb,ccc,dddd"; string[] strs = str.Split(','); 2.s ...
- 推荐一个Java设计模式写的很好的博客
博客地址:https://quanke.gitbooks.io/design-pattern-java/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E8%AE%BE%E8 ...
- SQL Server 2008 install
双击sql server 2008的.exe安装文件,进入[SQL Server 安装中心]. 2 点击界面左侧的[安装],然后点击右侧的[全新SQL Server 独立安装或向现有安装添加功能],进 ...
- vuecli脚手架+vue+vuex实现vue驱动的demo。
哎呀呀呀,现在大家都要会Vue || React,否则感觉跟这个前端的世界脱节了一样. start: vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-de ...
- centos7 将home目录空间扩容到根目录
[root@localhost ~]# umount /home/ [root@localhost ~]# lvremove /dev/mapper/centos-home Do you really ...