使用canvas的过程中会发现一长串字符想要输出到画板中，发现不能换行？？
/**
* text 文本
* x,y 轴
* width 行宽
* fontSize 字体大小
* rouHeight 行高，如果字体16px，1.5倍行距应该是24px
* ctx 画板内容对象
*/
function drawText( text, x, y, width, fs, rowHeight, ctx){
// 1 将字符串转换成数组
let test = text.split("")
let temp = ""
let row = []
// // 1.1 设置样式
ctx.font = `${fs}px 微软雅黑`
ctx.fillStyle = "black"
ctx.textBaseline = "middle"
// 1.2 计算文字宽度，若文字宽度大于设定的宽度，则push到数组下一个元素，否则将字符串++
for(let i = 0; i < test.length; i++ ){
if( ctx.measureText(temp).width > width ){
row.push(temp)
temp = ""
}
temp += test[i]
}
// 1.3 循环结束将temp最后一段字符push
row.push(temp)
// 1.4 遍历数组,输出文字
for(let j = 0; j < row.length; j++){
ctx.fillText( row[j], x, y+(j+1) * fs *rowHeight)
}
}
接下来我们调用试试
let ctx = document.querySelector('#canvas1').getContext('2d')
let text = '计算文字宽度，若文字宽度大于设定的宽度，则push到数组下一个元素，否则将字符串++'
drawText(text,0,0,180,16, 2 , ctx)
效果图：
文字换行.png
