简介
Canvas 是 HTML5 新增的一个绘图标签，我们可以利用 Canvas 实现各种酷炫的图形、动画效果等等，使用起来非常方便。而 npm 包 canvas-text 则是可以让我们在 Canvas 上方便地绘制文本的工具。
本篇文章将介绍如何使用 canvas-text 包进行简单文本绘制。
安装
使用 npm 进行安装：
npm install canvas-text
快速入门
首先，在要使用 canvas-text 的项目中引用包：
import CanvasText from 'canvas-text'
然后，在 Canvas 上绘制文本：
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
const canvasText = new CanvasText(ctx)
canvasText.write('Hello, World!', 100, 100)write() 方法接受三个参数：
- 第一个参数是要绘制的文本。
- 第二个和第三个参数是文本的坐标位置。
运行代码，即可在 Canvas 上看到绘制出的文本。
教程与示例
指定字体
指定字体：
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
const canvasText = new CanvasText(ctx, {
font: '30px Arial'
})
canvasText.write('Hello, World!', 100, 100)在初始化 CanvasText 时，可以传递第二个参数，以指定字体的大小和样式。上述代码指定了字体为 30px 大小的 Arial。
居中对齐
实现居中对齐的方法：
-- -------------------- ---- ------- ----- ------ - -------------------------------- ----- --- - ----------------------- ----- ---------- - --- --------------- - ----- ----- ------ -- ----- ---- - ------- ------- ----- - - ------------- - ------------------------- - - ----- - - -------------- - --- - - ---------------------- -- --
先测量文本长度，再计算出文本的中心位置，从而实现居中对齐的效果。
文本换行
我们可以使用 wrap() 方法来实现文本的换行：
-- -------------------- ---- ------- ----- ------ - -------------------------------- ----- --- - ----------------------- ----- ---------- - --- --------------- - ----- ----- ------ -- ----- ---- - ------ ----- ----- --- ----- ----------- ---------- ----- --- -- ------- ------ ---------- -- ------ -- ------ ----- -------- ----- ----- - --------------------- ------------ - --- --- ---- - - -- - - ------------- ---- - -------------------------- --- - - -- - --- -
上述代码使用 wrap() 方法对文本进行换行，将每一行的文本写入 Canvas 上。
文本样式
我们可以使用 fillStyle 和 strokeStyle 属性来设置文本的填充和描边颜色：
-- -------------------- ---- ------- ----- ------ - -------------------------------- ----- --- - ----------------------- ----- ---------- - --- --------------- - ----- ----- ------ -- -------------------- - ------- ------------------------ -------- ---- ---- ---------------------- - ------ ------------------------ -------- ---- ----
使用类似于 Canvas 2D API 中的方式，设置填充和描边颜色。
总结
使用 canvas-text 包可以很方便地在 Canvas 上绘制文本，同时也支持居中对齐、文本换行、文本样式等功能。希望本篇教程能给你带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c92ccdc64669dde5a5f