在 JS 中調整 canvas 里的文字間距

實現說明：

在 JS 中 canvas 原生沒有支持對文字間距的調整，我們可以通過將文字的每個字元單獨渲染來實現。本案例從 CanvasRenderingContext2D 對象的原型鏈上擴展了一個用於繪製帶間距的函數 fillTextWithSpacing()，使用方式與原生 fillText() 一致，除了多一個用於設置文字間距的參數。下麵展示了詳細用法。

效果展示：

線上演示 https://bi.cool/bi/ObU1xOY

實現代碼：

html

<canvas id="canvas" width='440' height="130"></canvas>

javascript

/**
 * 繪製帶間距的文字
 * @param text 要繪製的文字
 * @param x 繪製的位置 x
 * @param y 繪製的位置 y
 * @param spacing 文字間距
 */
CanvasRenderingContext2D.prototype.fillTextWithSpacing =
function(text,x,y,spacing=0){
    // 如果間距為0，則不用對每個字元單獨渲染以節省性能
    if(spacing === 0){
        this.fillText(text,x,y);
        return;
    }

    let totalWidth = 0; // 已渲染字元所占用的寬度
    // 對每個字元單獨渲染
    for(let i=0; i<text.length; i++){
        this.fillText(text[i],totalWidth,y);
        //累計已占用寬度
        totalWidth += ctx.measureText(text[i]).width + spacing;
    }
}

//創建畫布
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

//定義文字樣式
ctx.font = "bold 40px caption";
ctx.fillStyle = "#54a8eB";

//繪製文字
ctx.fillText('正常間距 - 陽光知道', 0, 40);
ctx.fillTextWithSpacing('擴大間距 - 陽光知道', 0, 80, 6);
ctx.fillTextWithSpacing('縮小間距 - 陽光知道', 0, 120, -5);

代碼說明：

我們是直接從原型鏈上實現的繪製帶間距的文字函數，所以可以直接通過 ctx.fillTextWithSpacing() 的方式調用。

其中變數 ctx 是一個 CanvasRenderingContext2D對象，我們用到它的以下屬性與函數：

• font 與 fillStyle 用來設置設置字體樣式與顏色
• measureText()函數 用於獲取文字所占用的寬高信息
• fillText()函數 用於在畫布上繪製文字

版權聲明：[自由轉載-註明出處-非商用-非衍生](知識共用許可協議)