canvas绘制文本内容自动换行的实现代码

要求建造一个约请卡页面，个中问题字数是动态的，最多可表现2行，假如超出2行则第2行内容末了添加省略号。按照产物妹子的性格，四行这个配置到时很大机遇改，以是这里必然不能写死，功效前几灵活的要求改成了最多可表现4行 ，其他仍是。产物妹子too young ：）！

空话不说，下面贴代码，献丑了！上代码之前先看一下必要传的参数！！

图文并茂的参数声名，包涵我捉急的PS技能和计划

ctx： 画布的上下文情形

content： 必要绘制的文本内容

drawX： 绘制文本的x坐标

drawY： 绘制文本的y坐标

lineHeight：文本之间的行高

lineMaxWidth：每行文本的最大宽度

lineNum：最多绘制的行数

// 笔墨自动换行 function textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) { var drawTxt = ''; // 当前绘制的内容 var drawLine = 1; // 第几行开始绘制 var drawIndex = 0; // 当前绘制内容的索引 // 判定内容是否可以一行绘制完毕 if(ctx.measureText(content).width <= lineMaxWidth) { ctx.fillText(content.substring(drawIndex, i), drawX, drawY); } else { for (var i = 0; i <= content.length; i++) { drawTxt += content[i]; if (ctx.measureText(drawTxt).width > lineMaxWidth) { if (drawLine === lineNum) { // 最后一行添加省略号 ctx.fillText(content.substring(drawIndex, i) + '...', drawX, drawY); break; } else { // 不是最后一行的环境 ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY); drawIndex = i + 1; // 记录当前行最后一个字符串的下一个idnex，用于绘制下行第一个字 drawLine += 1; // 行数+1 drawY += lineHeight; // 绘制内容的y坐标对应增进行高 drawTxt = ''; // 重置绘制的内容 } } } } }

不测发明

在绘制笔墨的进程中发明，绘制笔墨的y坐标是不是以笔墨上方做尺度，一图胜多言，上图！

赏识器情形： chrome 71.0.3578.98（正式版本）（64 位）

字体巨细为40px

绘制的y坐标为0时，可以看到文本再左上角只漏了一点点出来

绘制的y坐标为40时，可以看到文本可以完全表现

跋文

这是一个较量冷门的代码结果，可是也但愿可以帮到有必要的伴侣，也但愿各人多多支持剧本之家。

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!