JavascriptCanvas中的文字居中和宽度

1

Canvas中的文字居中和宽度

阅读:245 时间:2022年08月25日

一直以来我都认为Canvas API中,文字的处理很麻烦。不好计算位置和边界尺寸。直到刚刚阅读掘金文章竟然发现,有相关的API。真的是有种 “难道我一直是个SB ?”。 获取文本宽度 measureText() measureText(te...

一直以来我都认为Canvas API中,文字的处理很麻烦。不好计算位置和边界尺寸。直到刚刚阅读掘金文章竟然发现,有相关的API。真的是有种 “难道我一直是个SB ?”。

获取文本宽度

measureText()

measureText(text) 方法参数为需要测量的文本, 返回一个关于被测量文本TextMetrics 对象包含的信息(例如它的宽度)

例如,用红色背景完整包裹文字:

    const canvas = document.querySelector('canvas')
    canvas.width = 800
    canvas.height = 600
    const ctx = canvas.getContext('2d')
    ctx.font = '30px Arial'
    const text = 'Hello word'
    const measure = ctx.measureText(text)
    ctx.fillStyle = 'red'
    ctx.fillRect(56, 46, measure.width, 30)
    console.log(measure)
    ctx.fillStyle = '#fff'
    ctx.textBaseline = 'top'
    ctx.fillText(text, 56, 47)

效果如下:

文本的垂直与水平居中对齐

这里是两个属性:

  • textAlign    设置或返回文本内容的当前对齐方式
  • textBaseline    设置或返回在绘制文本时使用的当前文本基线

双向居中于画布示例:

    const canvas = document.querySelector('canvas')
    canvas.width = 800
    canvas.height = 600
    const ctx = canvas.getContext('2d')
    ctx.font = '30px Arial'
    const text = 'Hello word'
    ctx.fillStyle = '#000'
    ctx.textBaseline = 'middle'
    ctx.textAlign = 'center'
    ctx.fillText(text, 400, 300)

注意:

textAlign水平居中,是基于文字 x 锚点,也就是 ctx.fillText(text, 400, 300)中的400。如下图说明

textBaseline垂直方向基线(什么是基线?)位置,基于 文字 y 锚点, 也就是 ctx.fillText(text, 400, 300)中的300。如下图说明

发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^