/* * author:咔咔 * address:陕西西安 * wechat:fangkangfk * */ ctx.setFontSize(14) ctx.fillStyle = '#000'; var text = "但是如果使用了let,那么使用的将是块级作用域,也就是说,每个点击事件都会进入一个不同的块,所以每个点击都会输出正确的序号。"; // 填充文字 // ctx.fillText('公司业务:' + business, 20, 110) var chr = text.split("");//这个方法是将一个字符串分割成字符串数组 var temp = ""; var row = []; for (var a = 0; a < chr.length; a++) { if (ctx.measureText(temp).width < 250) { temp += chr[a]; } else { a--; //这里添加了a-- 是为了防止字符丢失,效果图中有对比 row.push(temp); temp = ""; } } row.push(temp); //如果数组长度大于2 则截取前两个 if (row.length > 2) { var rowCut = row.slice(0, 2); var rowPart = rowCut[1]; var test = ""; var empty = []; for (var a = 0; a < rowPart.length; a++) { if (ctx.measureText(test).width < 220) { test += rowPart[a]; } else { break; } } // empty.push(test); // var group = empty[0]//这里只显示两行,超出的用...表示 // rowCut.splice(1, 1, group); // row = rowCut; } for (var b = 0; b < row.length; b++) { ctx.fillText(row[b], 20, 110 + b * 18); }