效果图:
方法封装:
/**
*【drawTxt】canvas 绘制多行文本
*【TODO: 中英混排且考虑单词截断...】
*
* @param {*} context 绘制上下文环境 【必传】
* @param {*} text 文本内容
* @param {*} broken 单词是否截断显示 【true 如果不考虑英文单词的完整性 适用于所有情况】 【false 考虑英文单词的完整性 仅适用于纯英文】
* @param {*} fillStyle 文本颜色
* @param {*} fontSize 文本大小
* @param {*} x 文本左上角x坐标
* @param {*} y 文本左上角y坐标
* @param {*} lineHeight 行高
* @param {*} maxWidth 最大宽度
* @returns 此次绘制文本的高度 单位: px
*/
drawTxt:function({context,...rest}) {
if (!context) throw Error('请传入绘制上下文环境context')
// 获取计算后的值
let