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

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

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

安装

npm i fabric --save

  

 

  
1
 

示例

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

  

 

  
1
  
2
  
3
  
4
  
5
 

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)

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
 

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

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/125941299