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