JS中Canvas获取文字高度的完整指南

创作时间:

作者:

@小白创作中心

JS中Canvas获取文字高度的完整指南

引用

来源

https://docs.pingcode.com/baike/3673668

在前端开发中，Canvas是一个非常强大的绘图工具，它允许开发者在网页上绘制各种图形和文字。然而，要实现精确的文字布局，就需要准确测量文字的高度。本文将详细介绍如何在JavaScript中通过Canvas获取文字的高度，并探讨其在实际项目中的应用。

在JavaScript中，通过canvas获取文字的高度可以使用context.measureText().actualBoundingBoxAscent和context.measureText().actualBoundingBoxDescent这两个属性。具体方法如下：

一、创建Canvas元素并获取Context

首先，我们需要创建一个canvas元素，并获取其2D绘图上下文。

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');

二、设置文字样式

通过设置context.font来定义文字的样式。你可以设置字体、大小、加粗等属性。

context.font = '16px Arial';

三、测量文字

使用context.measureText()方法来测量文字的宽度，同时获取文字的高度信息。

const textMetrics = context.measureText('Hello, World!');
const textHeight = textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent;

重点：
actualBoundingBoxAscent和actualBoundingBoxDescent分别表示文字的上边界和下边界，二者相加即为文字的高度。

四、深入理解Canvas文字测量

1、理解TextMetrics对象

context.measureText()返回一个TextMetrics对象，该对象包含多种属性，如width（文字宽度）、actualBoundingBoxAscent（文字上边界）、actualBoundingBoxDescent（文字下边界）等。

2、注意跨浏览器兼容性

需要注意的是，actualBoundingBoxAscent和actualBoundingBoxDescent属性在某些旧版浏览器中可能不支持。可以使用getBoundingClientRect()方法作为替代。

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
context.font = '16px Arial';
const textMetrics = context.measureText('Hello, World!');
// Fallback for unsupported browsers
const textHeight = textMetrics.actualBoundingBoxAscent && textMetrics.actualBoundingBoxDescent ?
                   textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent :
                   getTextHeightFallback('16px Arial', 'Hello, World!');

function getTextHeightFallback(font, text) {
    const span = document.createElement('span');
    span.style.font = font;
    span.textContent = text;
    document.body.appendChild(span);
    const height = span.getBoundingClientRect().height;
    document.body.removeChild(span);
    return height;
}

五、实际应用中的文字测量

1、动态文字测量

在动态生成文字内容的应用中，比如图表、游戏等，准确的文字高度测量非常重要。这决定了文字在画布上的布局和对齐方式。

function drawText(text, x, y) {
    const textMetrics = context.measureText(text);
    const textHeight = textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent;
    context.fillText(text, x, y + textMetrics.actualBoundingBoxAscent);
}

2、结合项目管理系统

在项目管理系统中，比如研发项目管理系统PingCode或通用项目协作软件Worktile，文字高度的准确测量可以用于生成报表、甘特图和其他可视化组件。

function generateReport(text) {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    context.font = '16px Arial';
    const textMetrics = context.measureText(text);
    const textHeight = textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent;
    // 用文字高度来布局报表内容
    context.fillText(text, 10, 10 + textMetrics.actualBoundingBoxAscent);
    // 更多报表生成逻辑
}
// 在项目管理系统中使用
generateReport('项目进度报告');