canvas之文字换行

最新推荐文章于 2024-07-19 18:35:18 发布

fengzhiguanS

最新推荐文章于 2024-07-19 18:35:18 发布

阅读量1.7k

点赞数 8

分类专栏： canvas javascript 文章标签： javascript

本文链接：https://blog.csdn.net/fengzhiguanS/article/details/130865788

版权

javascript 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

canvas

1 篇文章 0 订阅

订阅专栏

当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。