手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

html canvas 如何实现文字绘制换行 (wrap)

时间:2024-10-15 14:11:32

1、fillText函数并没有换行这个选项,换行实际上需要自行计算实现。因此,第一步是对要绘制的文本分离为token。使用正则表达式/([a-芰垄孕动zA-Z0-9]+)/g作为spliter可以得到初步分离结果。

html canvas 如何实现文字绘制换行 (wrap)

2、分离的目的是确定所有可以断开的位置,而中文一般是可以在任意位置断开的,因此,配合map, concat等函数,实现英文数字连起来,而中文汉字都断开的效果。

html canvas 如何实现文字绘制换行 (wrap)

3、准备好token列表,就可以准备绘制多行文本了。首先设置canvas的context (2D) 的样式。

html canvas 如何实现文字绘制换行 (wrap)

4、接着以一行或者两行为例(多行情形完全类似),设置firstLine,secondLine变量备用。

html canvas 如何实现文字绘制换行 (wrap)

5、遍历每个token,尝试把该token加到第一行,如果加上token后,用mesureText测试宽度超过给定阈值,就结束这一行,余下的加到下一行。

html canvas 如何实现文字绘制换行 (wrap)

6、绘制的时候,统计产生的行数,调整行高,绘制位置,再进行绘制。

html canvas 如何实现文字绘制换行 (wrap)

7、最终效果如图,当文字超过单行长度自动显示为两行。

html canvas 如何实现文字绘制换行 (wrap)
© 手抄报圈