canvas绘制的字体换行
问题描述：canvas绘制的字体是不会自动换行的，也没有相关的api，所以我们想要canvas文字自动换行，只能利用js从字体长度或字数入手
相关api：canvas measureText()在画布上输出文本之前，检查字体的宽度
利用这个方法我们可以在文字超出指定长度后做换行处理
HTML
<div class="mask_operation" v-show="cvsshow" @click="createdImg">
<div class="cvs-box">
<canvas id="mycvs" ref="cvs" width="300" height="369"></canvas>
</div>
</div>
js
createdImg(){
//$refs.cvs获取vue的dom节点（原生的直接document获取dom节点）
let cvs = this.$refs.cvs
let ctx=cvs.getContext("2d");
this.drawtext(ctx,'在画布上输出文本之前，检查字体的宽度',15,245,168)
}
// 文字换行
drawtext(ctx,t,x,y,w){
//参数说明
//ctx：canvas的 2d 对象，t：绘制的文字，x,y:文字坐标，w：文字最大宽度
let chr = t.split("")
let temp = ""
let row = []
for (let a = 0; a<chr.length;a++){
if( ctx.measureText(temp).width < w && ctx.measureText(temp+(chr[a])).width <= w){
temp += chr[a];
}else{
row.push(temp);
temp = chr[a];
}
}
row.push(temp)
for(let b=0;b<row.length;b++){
ctx.fillText(row[b],x,y+(b+1)*20);//每行字体y坐标间隔20
}
},
