Canvas 常用方法

/*
绘制带有间距的文本
	text: 要绘制的文本
	x: 绘制文本的起始x坐标
	y: 绘制文本的起始y坐标
	space: 文本间距
	ctx: canvas对象
 */
canvasTextSpace(text, x, y, space, ctx) {
	let lineWidth = x;
	for(let i = 0; i < text.length; i++){
		if( i === 0) {
			ctx.fillText(text[i], x, y);
		}else {
			lineWidth += (space + ctx.measureText(text[i-1]).width);
			ctx.fillText(text[i], lineWidth, y);
		}
	}
},

/*
文本超出maxWidtth宽度，自动换行
	text: 要绘制的文本
	x: 绘制文本的起始x坐标
	y: 绘制文本的起始y坐标
	lineHeight: 与上一行文本的间距
	maxWidtth: 文本最大宽度
	ctx: canvas对象
 */
canvasTextAutoLine(text, x, y, lineHeight, maxWidtth, ctx){
	let textWidth = 0; // 文本宽度
	let lastSubStrIndex= 0;
	for(let i = 0; i < text.length; i++){
		textWidth += ctx.measureText(text[i]).width;
		if(textWidth > maxWidtth){
			ctx.fillText(text.substring(lastSubStrIndex,i), x, y);
			textWidth = 0;
			lastSubStrIndex = i;
			y += lineHeight
		}
		if(i === text.length - 1){
			ctx.fillText(text.substring(lastSubStrIndex,text.length), x, y);
		}
	}
},

/*
文本超出maxWidtth宽度，显示...
	text: 要绘制的文本
	x: 绘制文本的起始x坐标
	y: 绘制文本的起始y坐标
	maxWidtth: 文本最大宽度
	ctx: canvas对象
 */
canvasTextEllipsis(text, x, y, maxWidtth, ctx){
	let textWidth = 0; // 文本原长度
	let addDotTextWidth = 0; // 如果超出 文本的显示的实际长度
	let lastSubStrIndex = 0;
	let dotCount = 0; // 如果文本带有... 先记录下此时的文本长度
	let count = 0; // 如果文本超出 画...
	let dotWidth = ctx.measureText(' ...').width; // 计算 ...的宽度
	for(let i = 0; i < text.length; i++){
		textWidth += ctx.measureText(text[i]).width;
		if(textWidth > maxWidtth - dotWidth && !dotCount){
			addDotTextWidth = textWidth - ctx.measureText(text[i]).width
			lastSubStrIndex = i;
			dotCount++
		}
		if(textWidth > maxWidtth && !count) {
			count++
			ctx.fillText(' ...', x + addDotTextWidth, y);
		}
		if(i === text.length - 1){
			ctx.fillText(text.substring(0,count ? lastSubStrIndex : text.length), x, y);
		}
	}
}