簡(jiǎn)介
Fabric是一個(gè)強(qiáng)大而簡(jiǎn)單的JS Canvas庫(kù)，我們能通過(guò)使用它實(shí)現(xiàn)在Canvas上創(chuàng)建、填充圖形、給圖形填充漸變顏色。 組合圖形（包括組合圖形、圖形文字、圖片等）等一系列功能。簡(jiǎn)單來(lái)說(shuō)我們可以通過(guò)使用Fabric從而以較為簡(jiǎn)單的方式實(shí)現(xiàn)較為復(fù)雜的Canvas功能
官網(wǎng)文檔地址：http://fabricjs.com/docs/github
地址：https://github.com/fabricjs/fabric.jsDemo
地址：http://fabricjs.com/demos/
起步
引入
CDN引入：推薦使用bootcssCDN引入，
bootcssCDN提供包括fabric等在內(nèi)的眾多庫(kù)的引入服務(wù)
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({ //畫一個(gè)正方形
left:100,
top:100,
fill:'red',
width:30,
height:30,
})
canvas.add(rect) //把畫好的正方形，添加到 畫布里面去
var circle =new fabric.Circle({ //畫一個(gè)圓形
radius:50,
left:300,
top:10,
height:300,
fill:'red',
})
var triangle =new fabric.Triangle({ //畫一個(gè)圓形
width:80,
left:300,
top:30,
height:100,
fill:'green',
})
canvas.add(rect) //把畫好的正方形，添加到 畫布里面去
canvas.add(circle)
canvas.add(triangle)
</script>
</body>
</html>
image.png
