13518219792
本篇文章为大家展示了使用canvas怎么实现文本内容自动换行，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
创新互联成立与2013年，是专业互联网技术服务公司，拥有项目网站制作、做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元邢台做网站,已为上家服务,为邢台各地企业和个人服务,联系电话:028-86922220
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怎么实现文本内容自动换行，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。
