E企盈营销工具技术服务商 热线:4006-838-530

微信小程序canvas文本换行效果

E企盈直播平台营销卖货系统

我们在canvas上绘制多行文本的时候,不可能一行一行的绘制,这时就需要到了换行这个功能。文本换行参数:1、canvas对象,2、文本 3、距离左侧的距离 4、距离顶部的距离 5、(不用管)6、文本的宽度//文本换行 参数:1、canvas对象,2、文本 3、距离左侧的距离 4、距离顶部的距离 5、6、文本的宽度    drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {        var lineWidth = 0;        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), leftWidth, initHeight); //绘制截取部分                initHeight += 16; //16为字体的高度                lineWidth = 0;                lastSubStrIndex = i;                titleHeight += 30;            }            if (i == str.length – 1) { //绘制剩余部分                ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);            }        }        // 标题border-bottom 线距顶部距离        titleHeight = titleHeight + 10;        return titleHeight    },使用方法跟普通方法是一样的:_this.drawText(context, content, 74, 286, 148, 227);

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序canvas文本换行效果
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏