前端可视化：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 从入门到劝朋友放弃（图解版）