canvas绘图文字换行，第一行文字少计算一个字宽度

微信公开课小程序热门讨论关于「canvas绘图文字换行，第一行文字少计算一个字宽度」的小程序开发问题
补充:绘制多行文本@paramctxcanvas对象@paramstr文本@paramleftWidth距离左侧的距离@paraminitHeight距离顶部的距离@paramtitleHeight文本行高@paramcanvasWidth文本区宽度@returns{}
展开:***绘制多行文本*@paramctxcanvas对象*@paramstr文本*@paramleftWidth距离左侧的距离*@paraminitHeight距离顶部的距离*@paramtitleHeight文本行高*@paramcanvasWidth文本区宽度*@returns{*}*drawText:function(ctx,str,leftWidth,initHeight,titleHeight,canvasWidth){letlineWidth=0;letlastSubStrIndex=0;每次开始截取的字符串的索引for(leti=0;i<strlength;i++){lineWidth+=ctxmeasureText(str[i])width;if(lineWidthcanvasWidth){ctxfillText(strsubstring(lastSubStrIndex,i),leftWidth,initHeight);绘制截取部分initHeight+=titleHeight;lineWidth=0;lastSubStrIndex=i;}if(i==strlength1){绘制剩余部分ctxfillText(strsubstring(lastSubStrIndex,i+1),leftWidth,initHeight);}}},onLoad:function(options){constctx=wxcreateCanvasContext(scene);constcanvasWidth=300;constcanvasHeight=400;constbgColor=577C8A;开始绘制背景区ctxsetFillStyle(bgColor)ctxfillRect(0,0,canvasWidth,canvasHeight)开始绘制文字区ctxsetFontSize(18);ctxsetFillStyle(fff);letstr=哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈;thisdrawText(ctx,str,50,200,22,200);调用行文本换行函数ctxdraw()},用canvas做文本换行的时候第一行的长度总是少了一个字的宽度呢即速小程序：substring方法返回的子串包括start处的字符，但不包括stop处的字符：thisCalculateText=function(text,width){vararyText=[];varoutText=;varword=null,preWord=null;for(vari=0;i<textlength;++i){word=text[i];if(word== )换行{aryTextpush(outText);outText=;}elseif(word== ){if(preWord!= ) 不处理{aryTextpush(outText);outText=;}}else{outText+=text[i];vartextWidth=thisCanvasmeasureText(outText)width;if(textWidth=width){aryTextpush(outText);outText=;}}preWord=word;}if(outTextlength0)aryTextpush(outText);consolelog(aryText)returnaryText;}
更多有关「canvas绘图文字换行，第一行文字少计算一个字宽度」的讨论可以前往微信公开课小程序参与互动哦！了解更多