canvas字体换行

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
    }

},