canvas可以设置文字间距吗

如题,canvas可以设置文字间距吗,如何设置。。

阅读 14.9k
4 个回答

绘制文字时动态设置fillText的x坐标位置

可以设置fillText的参数maxWidth控制宽度来挤字体,不过固定位数微调还好,如果位数不固定还是不合适!

我自己实现了一个,功能还挺完整的
效果图
完整代码链接:在 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;
    }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题