美文网首页
canvas 文字在容器内自动换行

canvas 文字在容器内自动换行

作者: littlesunn | 来源:发表于2023-09-22 13:17 被阅读0次
        toFormateStr(ctx: CanvasRenderingContext2D, text:string, boxWidth: number, startX: number, startY: number, lineHeight: number) {
            let textArr = text.split("");
            let liner = 0;
            let fontSize = 20
            var drawText = (textArr: string[]) => {
                for (let i = 0; i < textArr.length; i++) {
                    const t = textArr[i];
                    if (fontSize * (i + 1) > boxWidth) {
                        liner++;
                        drawText(textArr.slice(i, textArr.length))
                        break;
                    }else {
                        ctx.fillText(t, (startX + fontSize * i), startY + liner * fontSize + liner * lineHeight);
                    }
                }
            }
            drawText(textArr);
            return liner + 1;
        }
    

    相关文章

      网友评论

          本文标题:canvas 文字在容器内自动换行

          本文链接:https://www.haomeiwen.com/subject/hsstbdtx.html