本篇文章为大家展示了使用canvas怎么实现文本内容自动换行,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
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 = ''; // 重置绘制的内容
}
}
}
}
}
上述内容就是使用canvas怎么实现文本内容自动换行,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://www.jb51.net/html5/654885.html