uni-app canvas文本自动换行

封装

	// 填充自动换行的文本
	function fillFeedText({
		ctx, text, x, y, maxWidth, lineHeight, color, size
	}) {
		// 文本配置
		ctx.setFontSize(size);
		ctx.setFillStyle(color);

		// 计算文本换行宽高，换行逻辑
		const words = text.split('');
		let line = '';
		const lines = [];
		for (let i = 0; i < words.length; i++) {
			const word = words[i];
			const testLine = line + word;
			const metrics = ctx.measureText(testLine);
			if (metrics.width > maxWidth && i > 0) {
				lines.push(line);
				line = word;
			} else {
				line = testLine;
			}
		};

		// 填充文本
		lines.push(line);
		lines.forEach((line, index) => {
			ctx.fillText(line, x, y + ((index++) * lineHeight), maxWidth);
		});
	}

使用

// 文本集合
				const text = ["时间：" + Tool.now(), state.address]; // 需要填充两个文本
				text.forEach((line, index) => {
					fillFeedText({
						ctx,
						text: line,
						x: padding,
						y: state.height * 0.91 + ((index++) * lineHeight),
						maxWidth: state.width - padding,
						lineHeight,
						color: '#FFFFFF',
						size: 10
					})
				});

效果