【避坑指“难”】canvas绘制时,文字过长自动换行

  getTextCanvas(ctx,content,drawX, drawY, lineHeight, lineMaxWidth, lineNum){
    var drawTxt = ''; // 当前绘制的内容
    var drawLine = 1; // 第几行开始绘制
    var drawIndex = 0; // 当前绘制内容的索引
    // 判断内容是否可以一行绘制完毕
    if(ctx.measureText(content).width <= lineMaxWidth) {
        ctx.fillText(content.substring(drawIndex, i), drawX, drawY);
    } else {
        for (var i = 0; i < content.length; i++) {
                drawTxt += content[i];
                if (ctx.measureText(drawTxt).width >= lineMaxWidth) {
                    if (drawLine >= lineNum) {
                        ctx.fillText(content.substring(drawIndex, i) + '..', drawX, drawY);
                        break;
                    } else {
                        ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY);
                        drawIndex = i + 1;
                        drawLine += 1;
                        drawY += lineHeight;
                        drawTxt = '';
                    }
                } else {
                    // 内容绘制完毕,但是剩下的内容宽度不到lineMaxWidth
                    if (i === content.length - 1) {
                        ctx.fillText(content.substring(drawIndex), drawX, drawY);
                    }
                }
            }
    }
  },
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

椰卤工程师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值