fabricJs -convas篇

fabricJs canvas编辑

安装

yarn add fabric -S  
or
npm i fabric -S

使用

<canvas id="canvas" width="500" height="500"></canvas>  

//引入fabric  
import { fabric } from "fabric";  
or
const fabric = require("fabric").fabric;
  
// 创建一个fabric实例  
let canvas = new fabric.Canvas("canvas"); //可以通过鼠标方法缩小,旋转  
// or  
// let canvas = new fabric.StaticCanvas("canvas");//没有鼠标交互的fabric对象  
  
// 创建一个矩形对象  
let rect = new fabric.Rect({  
    left: 200, //距离左边的距离  
    top: 200, //距离上边的距离  
    fill: "green", //填充的颜色  
    width: 200, //矩形宽度  
    height: 200, //矩形高度  
});  
  
// 将矩形添加到canvas画布上  
canvas.add(rect);

含有监听，拖拽，旋转，放大，动画，自由绘画
等效果

附上github链接
点击跳转

微信链接