var wordList=words.split('')//把文字变成集合let wordX=0;//文字的起始位置X let wordY=0;//文字的起始位置Y//基础标点符号集合var fhArr=[",", ",", "。", "。", "!", ";", ":", "“", "”", "?", "【", "】", "、"]let wordI=0;//自增判断每一行的位置for(var i=0;i<wordList.length;i++){ctx.fillText(wordList[i], wordX, wordY);//显示文字wordX+=40//文字间隔、下一个文字的X位置wordI++;//自增,当前行的文字显示到第几个///当X的位置超出显示的位置或者(文字的位置+1到新的一行并且是标点符号时),当前文字换行展示,"12"一行显示12个文字if(wordX>750||((wordI+1)%12==0&&fhArr.includes(wordList[i+1]))){wordX=0;wordY+=42;//行间隔wordI=0;//初始化,重新计算}}
ps:canvas中图片加载的问题,建议嵌套加载,当一个图片加载完成时,在加载下一个(尤其是图片上有文字,或者多个图片叠加显示的时候),要不然会出现加载的时间差导致图层错乱