如题,canvas可以设置文字间距吗,如何设置。。
我自己实现了一个,功能还挺完整的
完整代码链接:在 JS 中调整 canvas 里的文字间距
/**
* 绘制带间距的文字
* @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;
}
}
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答1.4k 阅读✓ 已解决
3 回答2.3k 阅读✓ 已解决
绘制文字时动态设置fillText的x坐标位置