canvas之文字换行

时间 2019-11-19

标签 canvas 文字换行繁體版

原文原文链接

当canvas的宽度不够宽时，canvas不会自动换行，能够用下面的代码处理html

<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

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

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

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

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

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

设置样式索引

font = valueip

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

`textAlign = value`

文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。

textBaseline = value

基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。

direction = value

文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。