HTML | canvas measureText() 方法

概述

Canvas API 中的 measureText() 方法用于测量绘制文本的宽度。它返回一个包含一个额外属性 width 的对象，该属性代表文本的像素宽度。

const canvas = document.getElementById('myCanvas')
const context = canvas.getContext('2d')

const text = 'Hello, World!'
const font = '30px Arial'
const textMetrics = context.measureText(text, font)

console.log(textMetrics.width) // 160

语法

TextMetrics context.measureText(text)

参数

• text: 要测量的文本。
• font: 可选参数，指定字体和大小。默认值为当前字体。

返回值

measureText() 方法返回一个 TextMetrics 对象，该对象包含以下属性：

• width: 文本的像素宽度。

注意事项

• measureText() 方法不会在画布上绘制文本，它只是测量文本的宽度。
• 如果要在画布上绘制文本，请使用 fillText() 或 strokeText() 方法。

示例

const canvas = document.getElementById('myCanvas')
const context = canvas.getContext('2d')

const text = 'Hello, World!'
const font = '30px Arial'
const textMetrics = context.measureText(text, font)

console.log(textMetrics.width) // 160

context.fillText(text, 50, 50)

结语

measureText() 方法是 Canvas API 中非常有用的方法之一，它可以帮助您计算文本的宽度，以便您可以在合适的位置和尺寸上绘制文本。