个人知识库

Appearance

简介 ​

Fabric.js 是一个强大而简单的 Canvas 画布库

可以提供简单的 API 来创建和编辑复杂的图形

基本使用 ​

创建画布 ​

html
<!-- HTML -->
<canvas id="canvas"></canvas>
<!-- HTML -->
<canvas id="canvas"></canvas>
js
// JavaScript
const canvas = new fabric.Canvas('canvas');
// JavaScript
const canvas = new fabric.Canvas('canvas');

添加图形到画布 ​

js
canvas.add(new fabric.Rect({ left: 100, top: 100, fill: 'red', width: 100, height: 100 }));
canvas.add(new fabric.Rect({ left: 100, top: 100, fill: 'red', width: 100, height: 100 }));

通过案例可以感受到，如果你需要用 HTML Canvas 来绘制一些东西，并且这些东西可以响应用户的交互，比如：拖动、变形、旋转等 操作。 那用 fabric.js 是非常合适的，因为它内部不仅实现了 Canvas 对象模型，还将一些常用的交互操作封装好了，可以说是开箱即用。