Fabric.js 让用户手动加粗文本

---

theme: smartblue

本文简介

点赞 + 关注 + 收藏 = 学会了

本文介绍 Fabric.js 的 IText 在画布上如何让用户手动加粗文本。

效果如图所示：

要实现2种操作

1. 全文加粗
2. 只加粗选中的文字

如果你还不清楚 Fabric.js 有什么用，我强烈推荐你阅读 《Fabric.js 从入门到目中无人》 。该文能让你的前端技术再点亮一个技能点。

全文加粗

只需把 IText 的 fontWeight 属性设置成 bold 即可实现加粗。

如果想变回默认样式，可以将 fontWeight 设为 normal 。

修改完文字样式后，需要执行 canvas.renderAll() 重新渲染一下画布内容。

```html 加粗

```

加粗选中的文字

可以用 setSelectionStyles 设置被选中的文字样式，里面传一个样式对象即可。

```html 加粗

```

仓库

• ⭐本文代码仓库(完整版)

推荐阅读

| 文章 | 简介 | | :----------------------------------------------------------- | ------------------------------------------------------------ | | 《Fabric.js 橡皮擦的用法(包含恢复功能)》 | 橡皮擦需要下载一个工具包，详情可参考该文。 | | 《Fabric.js 基础画笔的用法 BaseBrush》 | 画笔的基础用法 | | 《Fabric.js 自由绘制圆形》 | 将“框选”动作改造成自由绘制圆形 | | 《Fabric.js 3个api设置画布宽高》 | 宽高设置并不是在初始化是才能进行的，本文介绍3种方法设置画布宽高，让你的画布更容易适配不同的使用场景 | | 《Fabric.js 更换图片的3种方法(包括更换分组内的图片，以及存在缓存的情况)》 | 如果你的项目需要动态更换画布上的图片，那我也给你总结了3中方法 | | 《Fabric.js 摆正元素的4种方法(带过渡动画)》 | 一键摆正被你旋转过的元素 | | 《Fabric.js 将本地图像上传到画布背景》 | 除了在初始化时设置画布背景外，我还做了本地上传背景的功能，让画布在运行时也能修改背景图 | | 《在 Vue3中使用Fabric.js实现渐变(Gradient)效果，包括径向渐变radial》 | 官方入门教程也只有线性渐变，以至于某些文章说 Fabric.js 只支持线性渐变。但其实径向渐变也完全支持 | | 《Fabric.js 从入门到目中无人》 | Fabric.js 入门指南，学完能应付简单业务 | | 《Fabric.js 右键菜单》 | Fabric.js 暂时还没右键事件，如果你想实现右键菜单的功能，可直接复制该文章的代码~ |