HTML5 canvas 繪製的文字如何換行？

阿新 • • 發佈：2019-01-14

HTML5 裡的 canvas 元素是一個圖形容器，我們可以通過 JavaScript 來控制它繪製各種文字和影象。

在使用 canvas 繪製某字串的時候，我們可能想要讓該字串在某處按要求換行。

這該怎麼實現呢？

你是不是想到了 JavaScript 裡的轉義字元 “\n” （換行符）？
在字串里加入 “\n” 在繪製時會有換行效果嗎？讓我們試一試：

example.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title 
>Example</title>
    </head>
    <body>
        <canvas id="canvas" height="400" width="400"></canvas>
    </body>
    <script src="main.js"></script>
</html>

main.js

var c = document.getElementById("canvas");
var context = c.getContext("2d");

function draw(){  
    context.font 
 = "20px Arial";
    context.fillStyle = "black";
    context.textBaseline = "middle";
    context.fillText("Hello, World!\nWhat a nice day.",0,10);
}

draw();

效果如圖

可以發現，文字並沒有換行
接下來，讓我們來對比一下，看看加不加“\n”對文字繪製有沒有影響

將draw()函式裡的程式碼改動一下：

function draw(){  
    context.font = "20px Arial";
    context.fillStyle 
 = "black";
    context.textBaseline = "middle";
    context.fillText("Hello, World!What a nice day.",0,10);
    context.fillText("Hello, World!\nWhat a nice day.",0,30);
}

對比效果如圖

這裡寫圖片描述

上面的是沒加 “\n” 的效果，下面是加了 “\n” 的效果

看起來上下兩個的效果就差了一個空格而已。這個空格哪來的？
其實，這個不是空格，而是 canvas 無法顯示這個換行符，而顯示出的一個佔位符

為什麼輸入 “\n” 從沒法換行呢？
我個人覺得，是因為瀏覽器無法知道你的下一行字串的起始座標應該在哪

沒有現成的，沒關係，我們可以自己自己動手創造一個

/****繪製自動換行的字串****/

function drawText(t,x,y,w){

    var chr = t.split("");
    var temp = "";              
    var row = [];

    context.font = "20px Arial";
    context.fillStyle = "black";
    context.textBaseline = "middle";

    for(var a = 0; a < chr.length; a++){
        if( context.measureText(temp).width < w ){
            ;
        }
        else{
            row.push(temp);
            temp = "";
        }
        temp += chr[a];
    }

    row.push(temp);

    for(var b = 0; b < row.length; b++){
        context.fillText(row[b],x,y+(b+1)*20);
    }
}

把這個函式加進main.js裡，然後再往draw()函式加上一行：

drawText("Hello, World!What a nice day.",0,30,110);

效果看起來還不錯：
這裡寫圖片描述

這是怎麼做到的呢？

其實不難。簡單來說，就是將需要換行的字串用split方法分割成一個以單個字元為元素的陣列，然後將該陣列的每個元素（也就是每個字元）依次拼接成一個臨時字串，然後測量臨時字串的長度。如果臨時字串的長度大於等於規定長度，就把該臨時字串看做一行，然後將剩下的字元繼續拼接；否則就繼續拼接，直至字元全部拼接完畢。最後，將每行的字串以一定間隔按順序輸出，就實現了換行的效果。

上面的drawText()函式還有很多可以完善的地方，大家可以根據要求自行改良

HTML5 canvas 繪製的文字如何換行？

canvas之文字換行

HTML5 canvas 繪製的文字如何換行？

小程序---canvas畫圖，生成分享圖片，畫圖文字換行

微信小程式canvas文字換行效果

Cocos2d-x 更改文字換行風格 ( cocos2dx change line )

textarea placeholder文字換行

div寬度固定，將其中的文字換行，並動態獲取div的高

echarts x軸文字換行顯示

CSS文字換行加省略號

p標籤中的文字換行

Canvas繪製文字（七）

css DIV中文字換行顯示

RichTextBox文字換行

UITextView 文字換行

mysql servlet呼叫插入帶有格式的大文字換行符無效的問題

《CSS3實戰》筆記--溢位文字省略：text-overflow和文字換行顯示：word-wrop

Objective-C文字換行方式（解決英文在行末時的換行問題）

WPF 文字換行TextWrapping 顯示不全用省略號TextTrimming 顯示不全彈提示內容ToolTip

css 多行文字換行

通過html5 canvas繪製時鐘

HTML5 canvas 繪製的文字如何換行？

相關推薦