Fabric.js 从入门到________

2022-04-17 10:32:08 浏览数 (1)

简介

首先要说的是:本文篇幅很

Fabric.js 简介

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

如果你需要用 canvas 做特效,那我推荐你使用 Fabric.js ,因为 Fabric.js 语法更加简单易用,而且还提供了很多交互类的 api

Fabric.js 简化了很多 Canvas 里的概念,代码看上去也更加语义化。

Fabric.js 能做什么?

可以打开 『Fabric.js 官网首页』 直接看例子,也可以看看 『Fabric.js Demos』 查看更炫酷的例子。

本文简介

如果是 0基础 的读者,希望可以从头读到尾,读完起码大概知道 Fabric.js 有哪些功能。

本文是根据我学习过程来编写的,只要跟着本文一步一步操作,一定可以入门 Fabric.js ,同时还能改善您的睡眠质量、解决毛发过多等诸多问题

由于我使用 Fabric.js 的时间不长,这份笔记在各个知识点的内容肯定不够全面的,也不一定完全正确。读者们如果发现本文存在不正确的地方请大胆指出,我会改的~

本文适合人群:

  • 有原生三件套基础的开发者
  • 最好有 canvas 基础(这是加分项,完全没有也没关系的)

本文主要讲解 Fabric.js 基础,包括:

  • 画布的基本操作
  • 基础图形绘制方法(矩形、圆形、三角形、椭圆、多边形、线段等)
  • 图片和滤镜的使用
  • 文本和文本框
  • 动画
  • 分组和打散分组
  • 基础事件
  • 自由绘画
  • 裁剪
  • 序列化和反序列化
  • ……

除此之外,还会讲一些进阶一点的操作,比如:

  • 自定义操作角样式和状态
  • 自定义控件
  • 复制粘贴图形
  • 使用事件方式操作图形和分组
  • ……

除了上述内容外,我还会根据日后的工作中整理出更多常用和好玩的操作,本文即学习仓库会不定期更新!!!

相关链接

『Fabric.js npm地址』

『Fabric.js github地址』

0 人点赞