在 JS 中调整 canvas 里的文字间距-Toy模板网

这篇具有很好参考价值的文章主要介绍了在 JS 中调整 canvas 里的文字间距。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

实现说明：

在 JS 中 canvas 原生没有支持对文字间距的调整，我们可以通过将文字的每个字符单独渲染来实现。本案例从 CanvasRenderingContext2D 对象的原型链上扩展了一个用于绘制带间距的函数 fillTextWithSpacing()，使用方式与原生 fillText() 一致，除了多一个用于设置文字间距的参数。下面展示了详细用法。

效果展示：

在 JS 中调整 canvas 里的文字间距

在线演示 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);