const metrics = ctx.measureText('Hello')

console.log(metrics.width)        // 文本宽度
console.log(metrics.actualBoundingBoxLeft)   // 左边界
console.log(metrics.actualBoundingBoxRight)  // 右边界
console.log(metrics.actualBoundingBoxAscent) // 上边界
console.log(metrics.actualBoundingBoxDescent) // 下边界

获取文本宽度

ctx.font = '20px Arial'
const text = 'Hello Canvas'
const metrics = ctx.measureText(text)
const width = metrics.width

console.log('文本宽度:', width)

文本宽度演示

测量文本宽度

文本边界框

文本居中定位

function centerText(ctx, text, x, y) {
  const metrics = ctx.measureText(text)
  const textWidth = metrics.width
  
  ctx.fillText(text, x - textWidth / 2, y)
}

居中定位演示

测量后居中定位

自动换行

function wrapText(ctx, text, x, y, maxWidth, lineHeight) {
  const words = text.split('')
  let line = ''
  let currentY = y
  
  for (let i = 0; i < words.length; i++) {
    const testLine = line + words[i]
    const metrics = ctx.measureText(testLine)
    
    if (metrics.width > maxWidth && i > 0) {
      ctx.fillText(line, x, currentY)
      line = words[i]
      currentY += lineHeight
    } else {
      line = testLine
    }
  }
  
  ctx.fillText(line, x, currentY)
}

自动换行演示

文本自动换行

文本截断

文本截断（超出显示省略号）

注意事项

先设置字体

必须在调用measureText之前设置font属性。

返回值单位

width属性返回的是CSS像素值。

浏览器兼容

actualBoundingBox等属性在较新浏览器中才支持。

上一章：文本基线

下一章：图像处理