1、fillText函数并没有换行这个选项,换行实际上需要自行计算实现。因此,第一步是对要绘制的文本分离为token。使用正则表达式/([a-芰垄孕动zA-Z0-9]+)/g作为spliter可以得到初步分离结果。
2、分离的目的是确定所有可以断开的位置,而中文一般是可以在任意位置断开的,因此,配合map, concat等函数,实现英文数字连起来,而中文汉字都断开的效果。
3、准备好token列表,就可以准备绘制多行文本了。首先设置canvas的context (2D) 的样式。
4、接着以一行或者两行为例(多行情形完全类似),设置firstLine,secondLine变量备用。
5、遍历每个token,尝试把该token加到第一行,如果加上token后,用mesureText测试宽度超过给定阈值,就结束这一行,余下的加到下一行。
6、绘制的时候,统计产生的行数,调整行高,绘制位置,再进行绘制。
7、最终效果如图,当文字超过单行长度自动显示为两行。