HTML5中，Canvas是一个非常强大的工具，提供了丰富的API来绘制图形和文本等。其中，ctx.filltext()是用于在Canvas上绘制文本的方法。但是，有时候我们可能会遇到一个问题：当绘制较长的文本时，ctx.filltext()方法似乎不会自动换行，导致文本溢出画布。
问题原因
这个问题的原因很简单：默认情况下，ctx.filltext()方法不会自动换行。它会将整个文本字符串绘制在一条直线上，而不考虑画布边缘或其他限制条件。
解决方案
要解决这个问题，我们可以采用以下两种方法之一：
方法一：手动分割文本
一种解决方法是手动将文本字符串分割成多行，并使用ctx.filltext()方法逐行绘制。
-- -------------------- ---- -------
-- ------
-------- ------------- ----- -- -- --------- ----------- -
--- ----- - ------------ ---
--- ---- - ---
------- - - -- - - ------------- ---- -
--- -------- - ---- - -------- - - --
--- ------- - --------------------------
--- --------- - --------------
-- ---------- - -------- -- - - -- -
------------------ -- ---
---- - -------- - - --
- -- -----------
-
---- -
---- - ---------
-
-
------------------ -- ---
-这个函数将文本字符串分割成多行，每行的最大宽度是maxWidth。它通过逐个单词地添加到当前行来构建每行，并在达到最大宽度时换行。
方法二：使用CSS样式
另一种解决方法是使用CSS样式来控制文本的自动换行。我们可以为Canvas元素设置样式white-space: pre-wrap; word-wrap: break-word;来实现自动换行。
-- -------------------- ---- -------
--------- -----
------
------
---------------------------
-------
--------- -
------ ------
------- ------
------- --- ----- ------
------------ ---------
---------- -----------
-
--------
-------
------
------- -----------------------
--------
--- ------ - ------------------------------------
--- --- - ------------------------
-- -------
-------- - ----- -------
-- ----------
-------------------------------------------- --- ----
---------
-------
-------总结
在使用HTML5 Canvas绘图时，ctx.filltext()方法不会自动换行可能会导致文本溢出画布。解决这个问题的方法可以手动分割文本或使用CSS样式控制自动换行。选择哪种方法取决于具体情况和个人偏好。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12248