canvas文本首行缩进和换行处理

最新推荐文章于 2024-08-03 16:15:53 发布

xxmaa

最新推荐文章于 2024-08-03 16:15:53 发布

阅读量3.7k

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/aassdffgdhbdb/article/details/88610317

版权

本文探讨了如何在HTML5 Canvas中实现文本的首行缩进效果，并详细讲解了处理文本换行的各种方法，包括使用测量文本宽度、手动插入换行符等技巧，旨在提供更灵活的文本布局解决方案。

摘要由CSDN通过智能技术生成

  /**
	* 
	* @param ctx 2d上下文对象
	* @param text 绘制文本
	* @param x 坐标轴x位置
	* @param y 坐标轴y位置
	* @param options 包含 maxWidth 最大宽度，lineHeight 文字行高，row 限制行数，textIndent 首行缩进，fontSize 文字大小
	*/
	function textEllipsis(ctx, text, x, y, options) {
	   if (typeof text !== 'string' || typeof x !== 'number' || typeof y !== 'number') {
	       return;
	   }
	   let defaultOpt = {
	       maxWidth: 100,
	       lineHeight: 14,
	       row: 1000,
	       textIndent: 0,
	       fontSize: 14
	   };
	   let params = Object.assign({}, defaultOpt, options);
	   // 分割文本
	   let textArr = text.split('');
	   // 文本最终占据高度
	   let textHeight = 0;
	   // 每行显示的文字
	   let textOfLine = '';
	   // 控制行数
	   let limitRow = params.row;
	   let rowCount = 0;
	   // 循环分割的文字数组
	   for (let i = 0; i < textArr.length; i++) {
	       // 获取单个文字或字符
	       let single