|
|
实现说明：
在 JS 中 canvas 原生没有支持对文字间距的调整，我们可以通过将文字的每个字符单独渲染来实现。
本案例从 CanvasRenderingContext2D 对象的原型链上扩展了一个用于绘制带间距的函数 fillTextWithSpacing()，使用方式与原生 fillText() 一致，除了多一个用于设置文字间距的参数。
下面展示了详细用法。
效果展示：
在线演示 https://bi.cool/bi/ObU1xOY
实现代码：
html
[code][/code]javascript
[code]/** * 绘制带间距的文字 * @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 |
|
