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

//循环内容的条数

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); //画出小于一行的数据

}

}

}

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

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

编辑于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区