前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序 canvas 循环画分行内容

微信小程序 canvas 循环画分行内容

原创
作者头像
田超
修改2018-06-11 13:24:15
1.2K0
修改2018-06-11 13:24:15
举报
文章被收录于专栏:田超学前端田超学前端

//循环内容的条数

for (var a = 0; a < content.length; a++) {

if (content[a] != "") { //去除空行

var str = content[a]

if (context.measureText(str).width > (width - 60)) { //判断一行的内容是否大于整行宽度

var chr = str.split("");

var temp = "";

var row = [];

for (var c = 0; c < chr.length; c++) {

if (context.measureText(temp).width < (width - 60)) {

;

}

else {

row.push(temp);

temp = "";

}

temp += chr[c];

}

row.push(temp);

//console.log(row)

for (var b = 0; b < row.length; b++) {

if (context.measureText(row[b]).width > (width - 60)) {

var sd = row[b]

if (b == 0) {

context.fillText(sd, 30, 460 + a * 50 + b * 20, width - 60); //画出第一部分

} else {

// context.fillText(sd, 30, 480 + a * 50, width - 60);

}

}

if (context.measureText(row[b]).width < (width - 60)) {

var f = row[b]

context.fillText(f, 30, 480 + a * 50, width - 60); //画出剩余部分

}

}

} else {

context.fillText(str, 30, 460 + a * 50, width - 60); //画出小于一行的数据

}

}

}

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档