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。字符串