theme: smartblue

本文简介

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

效果如图所示：

javascript粗体 js加粗字体_javascript粗体

要实现2种操作

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

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

全文加粗

javascript粗体 js加粗字体_javascript粗体_02

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

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

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

```html 加粗

```

加粗选中的文字

javascript粗体 js加粗字体_javascript_03

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

```html 加粗

```

仓库