html5 canvas 画一个矩形，文字超出矩形怎样自动换行？

Question

DrawingManager.prototype.showLayerTitle = function (layer, isSelected) {
let x, y;
if (layer.p1) {

    x = layer.p1.x1 + layer.x + 5, y = layer.p1.y1 + layer.y + 5;
} else {
    x = layer.x + 5, y = layer.y + 5;
}

this.$canvas.drawText({
    name: layer.name + "_title",
    layer: true,
    cursors: {
        mouseover: 'hand'
    },
    fromCenter: false,
    fillStyle: '#9cf',
    strokeStyle: isSelected ? '#03e2dc' : '#d3e2dc',
    strokeWidth: 1,   //笔划宽度
    shadowColor: 'black',  //阴影颜色
    shadowBlur: 2,   //阴影模糊
    shadowOffsetX: 2,
    shadowOffsetY: 2,
    groups: ['grpTitle'],
    x: x, y: y,
    fontSize: isSelected ? 16 : 14,
    // fontFamily: 'Verdana, sans-serif',
    text: layer.data.title === '' ? '...':layer.data.title,
    click: () => {
        if(this.canvasDrawingModel === 0){
            saveCategory(layer.data.title, layer.name);
        }
    }
})

};
如何让text换行

Answer 1

 var c=document.getElementById("canvas"); 
var ctx=c.getContext("2d"); 
ctx.fillStyle="#E992B9";
ctx.lineWidth=1; 
var str = "假如生活欺骗了你，请不要悲伤！thank you!"
var lineWidth = 0;
var canvasWidth = c.width;//计算canvas的宽度
var initHeight=15;//绘制字体距离canvas顶部初始的高度
var lastSubStrIndex= 0; //每次开始截取的字符串的索引
for(let i=0;i<str.length;i++){ 
    lineWidth+=ctx.measureText(str[i]).width; 
    if(lineWidth>canvasWidth){  
        ctx.fillText(str.substring(lastSubStrIndex,i),0,initHeight);//绘制截取部分
        initHeight+=20;//20为字体的高度
        lineWidth=0;
        lastSubStrIndex=i;
    } 
    if(i==str.length-1){//绘制剩余部分
        ctx.fillText(str.substring(lastSubStrIndex,i+1),0,initHeight);
    }
}

https://blog.csdn.net/lishihong108/article/details/52483867?ref=myread