在 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()函数 用于在画布上绘制文字

版权声明：[自由转载-注明出处-非商用-非衍生](知识共享许可协议)