canvas之文字换行

当canvas的宽度不够宽时,canvas不会自动换行,可以用下面的代码处理

<body>
    <canvas id="canvas" width="200" height="200" style="background:pink;"></canvas>
    <script>
    function draw() {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var str = "当内容特别多的时候,canvas不会自动换行,需要特别处理当内容特别多的时候,canvas不会自动换行,需要特别处理当内容特别多的时候,canvas不会自动换行,需要特别处理当内容特别多的时候,canvas不会自动换行,需要特别处理";
        var canvasWidth = ctx.canvas.width;
        ctx.font = "20px Microsoft";
        console.log(ctx.measureText(str))
        canvas.height = Math.ceil(ctx.measureText(str).width / canvasWidth) * 25;
        ctx.font = "16px Microsoft"; //重新定义画布的高度后,需要重新定义字体的大小,否则变成默认值
        var initHeight = 25; //绘制字体距离canvas顶部初始的高度
        var lastSunStrIndex = 0; //每次开始截取的字符串的索引
        var contentWidth = 0;
 
        if (ctx.measureText(str).width <= canvasWidth) {
            ctx.fillText(str, 0, initHeight);
            return
        }
 
        for (let i = 0; i < str.length; i++) {
            contentWidth += ctx.measureText(str[i]).width;
            if (contentWidth > canvasWidth - 32) {
                ctx.fillText(str.substring(lastSunStrIndex, i), 12, initHeight) //绘制未截取的部分
                initHeight += 25;
                contentWidth = 0;
                lastSunStrIndex = i;
            }
            if (i == str.length - 1) {
                ctx.fillText(str.substring(lastSunStrIndex, i + 1), 12, initHeight);
            }
 
        }
    }
    draw()
    </script>
</body>

关于canvas 绘制文本的方法与样式设置

canvas 提供了两种方法来渲染文本:

fillText(text, x, y [, maxWidth])

在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的.

strokeText(text, x, y [, maxWidth])

在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的.

设置样式

font = value

当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif

textAlign = value

文本对齐选项. 可选的值包括:startendleftright or center. 默认值是 start

textBaseline = value

基线对齐选项. 可选的值包括:tophangingmiddlealphabeticideographicbottom。默认值是 alphabetic。

direction = value

文本方向。可能的值包括:ltrrtlinherit。默认值是 inherit。

  • 8
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

fengzhiguanS

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

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

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

打赏作者

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

抵扣说明:

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

余额充值