canvas 渲染多行文字

/**
 * @param {Object} ctx canvas上下文
 * @param {String} text 需要输入的文本
 * @param {Number} x X轴起始位置
 * @param {Number} y Y轴起始位置
 * @param {Number} maxWidth 单行最大宽度
 * @param {Number} lineHeight 行高
 */
function drawText(ctx, text, x, y, maxWidth, lineHeight) {
    let canvas = ctx.canvas;
    let arrText = text.split('');
    let line = '';
    for (let n = 0; n < arrText.length; n++) {
        let testLine = line + arrText[n];
        let metrics = ctx.measureText(testLine);
        let testWidth = metrics.width;
        if (testWidth > maxWidth && n > 0) {
            ctx.fillText(line, x, y);
            line = arrText[n];
            y += lineHeight;
         } else {
            line = testLine;
         }
    }
    ctx.fillText(line, x, y);
}