在前端开发中，<canvas> 元素是一个十分强大的工具，它能够用于绘制图形、渲染动画、以及显示文本等。但是，在处理文本时，经常会遇到需要将长文本进行自动换行的需求。那么，该如何在 <canvas> 元素中实现文本自动换行呢？
问题背景
首先，我们来看一下在不考虑文本换行情况下，如何在 <canvas> 中绘制文本。
-- -------------------- ---- -------
--------- -----
------
------
------------- ------------
-------
------
------- ------------- ----------- ----------------------
--------
----- ------ - ------------------------------------
----- --- - ------------------------
-------- - ----- -------
------------------ -- - ---- ----- ---- -- - ---- ----- ---- -- - ---- ------- --- ----
---------
-------
-------上面的代码会在 <canvas> 中绘制出一行文本，但是如果当前的文本内容过长，会导致文本超出 <canvas> 的边界而无法完全显示。因此，我们需要将长文本进行自动换行，以适应 <canvas> 的大小。
解决方案
为了在 <canvas> 中实现文本自动换行，我们需要先测量出每一行文本的宽度，然后判断当前行是否超出了 <canvas> 的边界。如果超出了，就将当前行的文本进行截断，并将剩余的文本继续拆分到下一行中。
下面是一个实现文本自动换行的函数：
-- -------------------- ---- -------
-------- ----------------- ----- -- -- --------- ----------- -
----- ----- - ------------ ---
--- ---- - ---
--- ---- - - -- - - ------------- ---- -
----- -------- - ---- - -------- - - --
----- ------- - ------------------------------
----- --------- - --------------
-- ---------- - -------- -- - - -- -
---------------------- -- ---
---- - -------- - - --
- -- -----------
- ---- -
---- - ---------
-
-
---------------------- -- ---
-该函数接受六个参数：
context：CanvasRenderingContext2D 对象，表示画布上下文。text：要绘制的文本内容。x和y：绘制文本的起始坐标。maxWidth：每一行文本最大的宽度。lineHeight：每一行文本的行高。
函数首先将传入的文本字符串按空格进行拆分，得到单词数组 words。接着，使用循环遍历 words 数组，将每个单词加入到当前行中，测试当前行的宽度是否超出了最大宽度。如果超出了，将当前行绘制在画布上，并将剩余的文本拆分到下一行中。
最终，函数会在画布上绘制出自动换行后的文本。
下面是使用该函数实现文本自动换行的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
------------- ---- ------------
-------
------
------- ------------- ----------- ----------------------
--------
----- ------ - ------------------------------------
----- --- - ------------------------
----- ---- - ----- -- - ---- ----- ---- -- - ---- ----- ---- -- - ---- -------
----- - - ---
----- - - ---
----- -------- - ----
----- ---------- - ---
-------- - ----- -------
------------- ----
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------