多行文本分行及多行文本之后超出行数省略号显示，几乎在所有网站中都是不可避免的存在。

而该功能的实现，在前端开发中也可以说是必须经历的。

在canvas中我们要如何实现多行文本的自动分行及超出指定行数后省略号显示效果？

一、封装好的分行代码如下：

drawRowtext(ctx, text, pointX, pointY, rowStrnum, lineHeight,rowNum) {
	var len = text.length;
	var n = len / rowStrnum;
	var n1 = Math.ceil(n);//向上取整
	ctx.setFillStyle('#000000');
	ctx.setTextAlign('center');
	ctx.font = 'normal 14px Arial';
	for (var i = 0; i < n1; i++) { 
		if(i < (rowNum-1)){
			ctx.fillText(text.slice(i * rowStrnum, ((i + 1) * rowStrnum)+1), pointX, pointY + i * lineHeight);
		}
		if(i == (rowNum-1)){
			if((i+1)*rowStrnum > len){
				ctx.fillText(text.slice(i * rowStrnum, ((i + 1) * rowStrnum)+1), pointX, pointY + i * lineHeight);
			}else{
				ctx.fillText(text.slice(i * rowStrnum, ((i + 1) * rowStrnum))+'...', pointX, pointY + i * lineHeight);
			}
		}
	}
	return n * lineHeight;
}

二、方法参数解析

    ctx：创建的canvas画布。

    text：需要进行自动分行的完整文本。

    pointX：文本左上角X坐标位置。

    pointY：文本左上角Y坐标位置。

    rowStrnum：每行显示的文本个数。（每行显示10个文字）

    lineHeight：行高，即每行的高度。

    rowNum：显示行数。（如：有多行文本，但只需要显示三行）

三、自动分行代码解析

    1、提取文本的长度，根据每行需要显示的文字个数，计算出一共有多少行文本。

    2、setFillStyle、setTextAlign、font设置字体颜色、居中及文字加粗、大小等信息。

    3、使用for循环调用fillText()方法，将文本插入画布中。

    4、for循环中判断是否超过要求显示行数，不超过则继续将数据插入画布中，超过则忽略掉。