canvas 文字换行

/*
        str:要绘制的字符串
        canvas:canvas对象
        initX:绘制字符串起始x坐标
        initY:绘制字符串起始y坐标
        lineHeight:字行高
        */
        canvasTextAutoLine(str, ctx, initX, initY, lineHeight = 32) {
            var lineWidth = 0;
            var canvasWidth = 360;
            var lastSubStrIndex = 0;
            for (let i = 0; i < str.length; i++) {
                lineWidth += ctx.measureText(str[i]).width;
                if (lineWidth > canvasWidth - initX) {
                    ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY);
                    initY += lineHeight;
                    lineWidth = 0;
                    lastSubStrIndex = i;
                }
                if (i == str.length - 1) {
                    ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
                }
            }
        },
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容