Fabric.js 中文教程
Fabric.js 是一个简单且强大的 canvas 库
功能强大
Fabric.js 是一款老牌的 canvas 库。内置了数种基础图形、笔刷等工具。
使用简单
在日常开发时，相比起原生 canvas 代码，Fabric.js 能让你的业务代码更加简介。学习成本也比原生 canvas 低很多。
语义清晰
同样是创建一个基础图形元素（比如矩形），如果你没学过 canvas，你可能看不懂原生的代码到底表示什么。而 Fabric.js 提供了语义更友好的 api 。
原生canvas VS Fabric.js
下面2段代码，在没怎么写注释的情况下，相信你会更愿意去阅读 Fabric.js 版的代码。
// 原生canvas
const cnv = document.getElementById('c') // 获取页面中的canvas元素
const ctx = cnv.getContext('2d')
ctx.moveTo(50, 50)
ctx.lineTo(200, 50)
ctx.lineTo(200, 120)
ctx.lineTo(50, 120)
ctx.lineTo(50, 50)
ctx.fillStyle = '#aa96da'
ctx.fill()
// Fabric.js
const canvas = new fabric.Canvas('c') // 获取页面中的canvas元素
const rect = new fabric.Rect({
top: 50,
left: 50,
width: 150,
height: 70,
fill: '#aa96da'
})
canvas.add(rect)