小程序填充文本怎麼換行

/*
 * 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);
          }
相關文章
相關標籤/搜索