fabricJs -convas篇

搬砖的小编

于 2021-09-14 17:31:12 发布

阅读量146

点赞数

分类专栏： js canvas JavaScript 文章标签： javascript canvas html

本文链接：https://blog.youkuaiyun.com/weixin_46472377/article/details/120292303

版权

js 同时被 3 个专栏收录

13 篇文章

订阅专栏

JavaScript

10 篇文章

订阅专栏

canvas

1 篇文章

订阅专栏

这篇博客介绍了如何使用Fabric.js库在HTML5 canvas元素上创建和操作交互式图形，包括添加矩形、监听事件、拖拽、旋转和缩放功能。通过示例代码展示了基本用法，并提供了GitHub链接供进一步探索。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);

含有监听，拖拽，旋转，放大，动画，自由绘画在这里插入图片描述
等效果