html5 canvas绘制文字按规则换行

今天遇到了一个公司项目，需要使用canvas将文字绘制成图片使用。查了一查网上虽然有相关的代码，但是都是固定的，还不好修改，索性直接自己重新写了一个。

在这里提示一下，一定要注意，如果修改了canvas的高度，当前设置的所有的东西都会失效。

而且公司还要求每一行开头不能是标点符号，耗费一天的时间，总算写了出来。

总的想法是，canvas有一个能够获得将一个字符串绘制到canvas上得到绘制多宽的方法measureText(text).width，所以，我们可以通过判断长度来自动换行。

for(var i = 0; i<settings.text.length; i++){
//获取当前的截取的字符串的宽度
lineWidth = ctx.measureText(settings.text.substr(lastTextIndex,i-lastTextIndex)).width;

if(lineWidth > settings.drawWidth){
//判断最后一位是否是标点符号
if(judgePunctuationMarks(settings.text[i-1])){
arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex));
lastTextIndex = i;
}else{
arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex-1));
lastTextIndex = i-1;
}
}
//将最后多余的一部分添加到数组
if(i === settings.text.length - 1){
arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex+1));
}
}上面就是我写的一个循环，如果超过了我定义的一行的宽度，就将换行，然后放到一个数组当中，统一绘制。



具体代码请看案例网址：

https://johnson2heng.github.io/PicClipUpload/text.html