简介
Fabric是一个强大而简单的JS Canvas库，我们能通过使用它实现在Canvas上创建、填充图形、给图形填充渐变颜色。 组合图形（包括组合图形、图形文字、图片等）等一系列功能。简单来说我们可以通过使用Fabric从而以较为简单的方式实现较为复杂的Canvas功能
官网文档地址：http://fabricjs.com/docs/github
地址：https://github.com/fabricjs/fabric.jsDemo
地址：http://fabricjs.com/demos/
起步
引入
CDN引入：推荐使用bootcssCDN引入，
bootcssCDN提供包括fabric等在内的众多库的引入服务
npm安装：npm install fabric --save
初始化demo
<script src="./fabric.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./fabric.js"></script>
</head>
<body>
<canvas width="800px" height="800px" id="c"></canvas>
<script type="text/javascript">
var canvas=new fabric.Canvas('c') //获取canvas
var rect =new fabric.Rect({ //画一个正方形
left:100,
top:100,
fill:'red',
width:30,
height:30,
})
canvas.add(rect) //把画好的正方形，添加到 画布里面去
var circle =new fabric.Circle({ //画一个圆形
radius:50,
left:300,
top:10,
height:300,
fill:'red',
})
var triangle =new fabric.Triangle({ //画一个圆形
width:80,
left:300,
top:30,
height:100,
fill:'green',
})
canvas.add(rect) //把画好的正方形，添加到 画布里面去
canvas.add(circle)
canvas.add(triangle)
</script>
</body>
</html>
image.png
