实现说明:
在 JS 中 canvas
原生没有支持对文字间距的调整,我们可以通过将文字的每个字符单独渲染来实现。
本案例从 CanvasRenderingContext2D
对象的原型链上扩展了一个用于绘制带间距的函数 fillTextWithSpacing()
,使用方式与原生 fillText()
一致,除了多一个用于设置文字间距的参数。
下面展示了详细用法。
效果展示:
在线演示 https://bi.cool/bi/ObU1xOY
实现代码:
html
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()
函数 用于在画布上绘制文字
版权声明:[自由转载-注明出处-非商用-非衍生](知识共享许可协议)
转载请注明出处: https://www.cnblogs.com/liuhangui/p/use-canvas-to-draw-text-with-spacing-in-js.html