/* * 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); }