前端可视化：Fabric.js HTML5 canvas 工具库

Fabric.js 是一个功能强大且操作简单的 Javascript HTML5 canvas 工具库。

文档：​​http://fabricjs.com/​​​ github: ​​https://github.com/fabricjs/fabric.js​​

安装

npm i fabric --save

示例

<canvas id="canvas"
  width="400" 
  height="400" 
  style="border: 1px solid #ccc;"
></canvas>

import { fabric } from 'fabric'

const canvas = new fabric.Canvas('canvas') // 这里传入的是canvas的id

// 创建一个长方形
const rect = new fabric.Rect({
  top: 30, // 距离容器顶部 30px
  left: 30, // 距离容器左侧 30px
  width: 100, // 宽 100px
  height: 60, // 高 60px
  fill: 'red' // 填充 红色
})

// 在canvas画布中加入矩形（rect）
canvas.add(rect)

参考文章
​​​Fabric.js​​​​Fabric.js 从入门到________​​​​Canvas 从入门到劝朋友放弃（图解版）​​