canvas文字换行处理

项目中需要用到canvas绘图，关于文字换行的处理一直没找到合适的解决方案，于是自己动手撸了一个。

函数实现的功能：

1、设置最大行数（最多多少行），超出部分用省略号（…）表示。
2、最大行数（lineNum）传入-1，实现自动换行效果。

参数说明：

		 *  参数解析：
		 * 
		 * 	ctx:  canvas绘图上下文
		 * 	str:  需要绘制的文本内容
		 * 	draw_width:  绘制后的文字显示宽度
		 * 	lineNum:  最大行数，多出部分用'...'表示， 如果传-1可以达到自动换行效果
		 * 	startX:  绘制文字的起点 X 轴坐标
		 * 	startY:  绘制文字的起点 Y 轴坐标
		 *	steps:  文字行间距

function toFormateStr (ctx, str, draw_width, lineNum, startX, startY, steps ) {

	var strWidth = ctx.measureText(str).width;     // 测量文本源尺寸信息（宽度）
	var startpoint = startY, keyStr = '', sreLN = strWidth / draw_width;
	var liner = Math.ceil(sreLN);     // 计算文本源一共能生成多少行
	let strlen = parseInt(str.length / sreLN); 	// 等比缩放测量一行文本显示多少个字符
				
	// 若文本不足一行，则直接绘制，反之大于传入的最多行数（lineNum）以省略号（...）代替
	if (strWidth  < draw_width) {
	
		ctx.fillText(str, startX, startpoint);
		
	} else {
	
		for (var i = 1; i < liner + 1; i++) {
			let startPoint = strlen * (i-1);
			if (i < lineNum || lineNum == -1) {
				keyStr = str.substr(startPoint, strlen);
				ctx.fillText(keyStr, startX, startpoint);
			} else {
				keyStr = str.substr(startPoint, strlen-5) + '...';
				ctx.fillText(keyStr, startX, startpoint);
				break;
			}
			startpoint = startpoint + steps;
		}
		
	}
}

调用：

const str = '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试';
toFormateStr(ctx, str, 260, 3, 20, 275, 20);

效果：