在 Vue3中使用Fabric.js实现渐变(Gradient)效果，包括径向渐变radial
Fabric.js 简介
文章图片
用官方的话来讲
简单来说，如果你需要用Fabric.js是一个强大而简单的Javascript HTML5 canvas工具库
canvas 做特效或者做交互，那不妨试试 Fabric.js 这个库，它会使开发更加简单和直观。Fabric.js 官网
Fabric.js npm地址
Fabric.js github地址
本文使用的开发环境
本文案例中使用了
Fabric.js 4.6 这个版本。使用了
Vite 构建 Vue3 项目。搭建项目
npm init @vitejs/app选择
Vue3，之后再根据提示初始化项目即可。安装
Fabric.js
npm install fabric --save为什么本文只写渐变？
渐变是
Fabric.js 的基础功能，但网上大部分文章都只写 线性渐变，很少有写到径向渐变的，因为官方好像也没给出径向渐变的例子。甚至还见过有些文章和评论说
Fabric.js 只支持线性渐变。但这个说法是错的！！！请看这个案例：【Fabric.js 渐变效果】
文章图片
没错，本文只想证明在
Fabric.js 4.6版本中是可以实现径向渐变的。线性渐变 linear
文章图片
径向渐变 radial
文章图片
r1、r2、x1、y1、x2、y2 这几个参数可以自己修改值然后看看效果，自己亲手改一下会理解得更深刻。仓库地址
文章图片
本文在线示例
示例代码
【Fabric.js|Fabric.js 渐变】点赞 + 关注 + 收藏 = 学会了
