1. 面向开发者的 Web 技术
  2. Web API
  3. CanvasRenderingContext2D
  4. CanvasRenderingContext2D:measureText() 方法

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

CanvasRenderingContext2D:measureText() 方法

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

CanvasRenderingContext2D.measureText() 方法返回一个包含被测量文本相关信息(例如它的宽度)的 TextMetrics 对象。

语法

js
measureText(text)

参数

text

需要测量的文本字符串。

返回值

TextMetrics 对象。

示例

给定 <canvas> 元素:

html
<canvas id="canvas"></canvas>

使用下面的代码,你能得到 TextMetrics 对象:

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let text = ctx.measureText("Hello world");
console.log(text.width); // 56;

规范

Specification
HTML
# dom-context-2d-measuretext-dev

浏览器兼容性

参见

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

AltStyle によって変換されたページ (->オリジナル) /