TextMetrics

TextMetrics interface represents the dimensions of a piece of text in the canvas; a textMetrics() instance can be retrieved using the CanvasRenderingContext2D.measureText() 方法。

特性

TextMetrics.width 只读
double giving the calculated width of a segment of inline text in CSS pixels. It takes into account the current font of the context.
TextMetrics.actualBoundingBoxLeft 只读
double giving the distance from the alignment point given by the CanvasRenderingContext2D.textAlign property to the left side of the bounding rectangle of the given text, in CSS pixels. The distance is measured parallel to the baseline.
TextMetrics.actualBoundingBoxRight 只读
double giving the distance from the alignment point given by the CanvasRenderingContext2D.textAlign property to the right side of the bounding rectangle of the given text, in CSS pixels. The distance is measured parallel to the baseline.
TextMetrics.fontBoundingBoxAscent 只读
double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute to the top of the highest bounding rectangle of all the fonts used to render the text, in CSS pixels.
TextMetrics.fontBoundingBoxDescent 只读
double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute to the bottom of the bounding rectangle of all the fonts used to render the text, in CSS pixels.
TextMetrics.actualBoundingBoxAscent 只读
double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute to the top of the bounding rectangle used to render the text, in CSS pixels.
TextMetrics.actualBoundingBoxDescent 只读
double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute to the bottom of the bounding rectangle used to render the text, in CSS pixels.
TextMetrics.emHeightAscent 只读
double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the top of the em square in the line box, in CSS pixels.
TextMetrics.emHeightDescent 只读
double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the bottom of the em square in the line box, in CSS pixels.
TextMetrics.hangingBaseline 只读
double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the hanging baseline of the line box, in CSS pixels.
TextMetrics.alphabeticBaseline 只读
double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the alphabetic baseline of the line box, in CSS pixels.
TextMetrics.ideographicBaseline 只读
double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the ideographic baseline of the line box, in CSS pixels.

范例

Baselines illustrated

This example demonstrates the baselines the TextMetrics object holds. The default baseline is the alphabeticBaseline . See also the CanvasRenderingContext2D.textBaseline 特性。

HTML

<canvas id="canvas" width="550" height="500"></canvas>
					

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const baselinesAboveAlphabetic = ['fontBoundingBoxAscent', 'actualBoundingBoxAscent',
                   'emHeightAscent', 'hangingBaseline'];
const baselinesBelowAlphabetic = ['ideographicBaseline', 'emHeightDescent',
                   'actualBoundingBoxDescent', 'fontBoundingBoxDescent'];
const baselines = [...baselinesAboveAlphabetic, ...baselinesBelowAlphabetic];
ctx.font = '25px serif';
ctx.strokeStyle = 'red';
baselines.forEach(function (baseline, index) {
  let text = 'Abcdefghijklmnop (' + baseline + ')';
  let textMetrics = ctx.measureText(text);
  let y = 50 + index * 50;
  ctx.beginPath();
  ctx.fillText(text, 0, y);
  let lineY = y - Math.abs(textMetrics[baseline]);
  if (baselinesBelowAlphabetic.includes(baseline)) {
    lineY = y + Math.abs(textMetrics[baseline]);
  }
  ctx.moveTo(0, lineY);
  ctx.lineTo(550, lineY);
  ctx.stroke();
});
					

结果

Measuring text width

When measuring the x-direction of a piece of text, the sum of actualBoundingBoxLeft and actualBoundingBoxRight can be wider than the width of the inline box ( width ), due to slanted/italic fonts where characters overhang their advance width.

It can therefore be useful to use the sum of actualBoundingBoxLeft and actualBoundingBoxRight as a more accurate way to get the absolute text width:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const text = 'Abcdefghijklmnop';
ctx.font = 'italic 50px serif';
const textMetrics = ctx.measureText(text);
console.log(textMetrics.width);
// 459.8833312988281
console.log(Math.abs(textMetrics.actualBoundingBoxLeft) +
            Math.abs(textMetrics.actualBoundingBoxRight));
// 462.8833333333333
					

规范

规范
HTML Living Standard
The definition of 'TextMetrics' in that specification.

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
TextMetrics Chrome 4 Edge 12 Firefox 1.5 IE 9 Opera 9 Safari 3.1 WebView Android Yes Chrome Android Yes Firefox Android 31 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
actualBoundingBoxAscent
Chrome 77
77
? — 77
Disabled
Disabled Until version 77 (exclusive): this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 79 Firefox 74 IE 不支持 No Opera ? Safari Yes WebView Android 77 Chrome Android 77
77
? — 77
Disabled
Disabled Until version 77 (exclusive): this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 不支持 No Opera Android ? Safari iOS Yes Samsung Internet Android 12.0
actualBoundingBoxDescent
Chrome 77
77
? — 77
Disabled
Disabled Until version 77 (exclusive): this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 79 Firefox 74 IE 不支持 No Opera ? Safari Yes WebView Android 77 Chrome Android 77
77
? — 77
Disabled
Disabled Until version 77 (exclusive): this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 不支持 No Opera Android ? Safari iOS Yes Samsung Internet Android 12.0
actualBoundingBoxLeft
Chrome 77
77
? — 77
Disabled
Disabled Until version 77 (exclusive): this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 79 Firefox 74 IE 不支持 No Opera ? Safari Yes WebView Android 77 Chrome Android 77
77
? — 77
Disabled
Disabled Until version 77 (exclusive): this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 不支持 No Opera Android ? Safari iOS Yes Samsung Internet Android 12.0
actualBoundingBoxRight
Chrome 77
77
? — 77
Disabled
Disabled Until version 77 (exclusive): this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 79 Firefox 74 IE 不支持 No Opera ? Safari Yes WebView Android 77 Chrome Android 77
77
? — 77
Disabled
Disabled Until version 77 (exclusive): this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 不支持 No Opera Android ? Safari iOS Yes Samsung Internet Android 12.0
alphabeticBaseline
Chrome Yes
Disabled
Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 79
Disabled
79
Disabled
Disabled From version 79: this feature is behind the Experimental Web Platform Features preference.
Firefox 74
Disabled
74
Disabled
Disabled From version 74: this feature is behind the dom.textMetrics.baselines.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE 不支持 No Opera ? Safari Yes WebView Android 不支持 No Chrome Android Yes
Disabled
Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 不支持 No Opera Android ? Safari iOS Yes Samsung Internet Android 不支持 No
emHeightAscent
Chrome Yes
Disabled
Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 79
Disabled
79
Disabled
Disabled From version 79: this feature is behind the Experimental Web Platform Features preference.
Firefox 74
Disabled
74
Disabled
Disabled From version 74: this feature is behind the dom.textMetrics.emHeight.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE 不支持 No Opera ? Safari Yes WebView Android 不支持 No Chrome Android Yes
Disabled
Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 不支持 No Opera Android ? Safari iOS Yes Samsung Internet Android 不支持 No
emHeightDescent
Chrome Yes
Disabled
Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 79
Disabled
79
Disabled
Disabled From version 79: this feature is behind the Experimental Web Platform Features preference.
Firefox 74
Disabled
74
Disabled
Disabled From version 74: this feature is behind the dom.textMetrics.emHeight.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE 不支持 No Opera ? Safari Yes WebView Android 不支持 No Chrome Android Yes
Disabled
Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 不支持 No Opera Android ? Safari iOS Yes Samsung Internet Android 不支持 No
fontBoundingBoxAscent
Chrome Yes
Disabled
Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 79
Disabled
79
Disabled
Disabled From version 79: this feature is behind the Experimental Web Platform Features preference.
Firefox 74
Disabled
74
Disabled
Disabled From version 74: this feature is behind the dom.textMetrics.fontBoundingBox.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE 不支持 No Opera ? Safari Yes WebView Android 不支持 No Chrome Android Yes
Disabled
Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 不支持 No Opera Android ? Safari iOS Yes Samsung Internet Android 不支持 No
fontBoundingBoxDescent
Chrome Yes
Disabled
Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 79
Disabled
79
Disabled
Disabled From version 79: this feature is behind the Experimental Web Platform Features preference.
Firefox 74
Disabled
74
Disabled
Disabled From version 74: this feature is behind the dom.textMetrics.fontBoundingBox.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE 不支持 No Opera ? Safari Yes WebView Android 不支持 No Chrome Android Yes
Disabled
Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 不支持 No Opera Android ? Safari iOS 不支持 No Samsung Internet Android 不支持 No
hangingBaseline
Chrome Yes
Disabled
Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 79
Disabled
79
Disabled
Disabled From version 79: this feature is behind the Experimental Web Platform Features preference.
Firefox 74
Disabled
74
Disabled
Disabled From version 74: this feature is behind the dom.textMetrics.baselines.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE 不支持 No Opera ? Safari Yes WebView Android 不支持 No Chrome Android Yes
Disabled
Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 不支持 No Opera Android ? Safari iOS Yes Samsung Internet Android 不支持 No
ideographicBaseline
Chrome Yes
Disabled
Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 79
Disabled
79
Disabled
Disabled From version 79: this feature is behind the Experimental Web Platform Features preference.
Firefox 74
Disabled
74
Disabled
Disabled From version 74: this feature is behind the dom.textMetrics.baselines.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE 不支持 No Opera ? Safari Yes WebView Android 不支持 No Chrome Android Yes
Disabled
Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 不支持 No Opera Android ? Safari iOS Yes Samsung Internet Android 不支持 No
width
Chrome 4 Edge 12 Firefox 1.5 IE 9 Opera 9 Safari 3.1 WebView Android Yes Chrome Android Yes Firefox Android 31 Opera Android Yes Safari iOS 3.2 Samsung Internet Android Yes

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
用户必须明确启用此特征。
用户必须明确启用此特征。

另请参阅