一直以来我都认为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。如下图说明