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、最终效果如图，当文字超过单行长度自动显示为两行。
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、最终效果如图，当文字超过单行长度自动显示为两行。
