为什么 HTML5 画布的“TextMetrics”对象中的“width”和“actualBoundingBoxLeft + actualBoundingBoxRight”之间存在差异？
cev*_*ing 2 text 2d html5-canvas
当我measureText如代码片段所示调用时，我得到以下结果：
{
"width": 45.43333435058594,
"actualBoundingBoxLeft": 0,
"actualBoundingBoxRight": 45.35,
"actualBoundingBoxAscent": 18,
"actualBoundingBoxDescent": 0
}
width如果和为零actualBoundingBoxRight，为什么之间存在差异？actualBoundingBoxLeft
c2d = document.getElementById('canvas').getContext('2d');
c2d.direction = 'ltr';
c2d.font = '24px serif';
console.log (c2d.measureText('TeX'));<canvas id="canvas"></canvas>希望我能得到你的要求，我会尝试一下。
\n该width属性给出了文本的提前宽度。所占用的空间不包括左侧和右侧轴承。
\xe2\x80\x93 宽度属性
\n该内联框的宽度（以 CSS 像素为单位）。（文本的超前宽度。）
\n\xe2\x80\x93 实际BoundingBoxLeft属性
\n从textAlign属性指定的对齐点到给定文本边框左侧的平行于基线的距离，以 CSS 像素为单位；正数表示从给定对齐点向左的距离。
\n其中还给出了注释：
\n\n\n该值与下一个值 (actualBoundingBoxRight) 的总和可以比内联框的宽度 (width) 更宽，特别是对于字符超出其预定义宽度的倾斜字体。
\n
\xe2\x80\x93 实际BoundingBoxRight属性
\n从textAlign属性指定的对齐点到给定文本边框右侧的平行于基线的距离，以 CSS 像素为单位；正数表示从给定对齐点向右的距离。
\n\n
一些例子
\n使用画布的measuereText中的数据 （正常左，斜体右）：f
错误：交换了中间和底部宽度线（蓝色）的位置，但没有更新标签。对于图中的标签，“中”是“底部”，“底部”是“中间”。我稍后会尝试抽出时间上传新的。
\n尤其是倾斜的版本很好地体现了这一点。紧随textBaseline（灰色水平线）并从textAlign（灰色垂直线）开始的蓝线显示字形的宽度值。这就是字体使“打字头”前进的程度。
\n边界框左/右是水平扩展的极端。如果把它看成一个矩形。上升和下降也是如此。它们是上/下的极端。但是，由于字体的“重叠”（字距调整等），它不是代表高级宽度的宽度因素。
\n盒子宽度的总和111 + 39 = 150只是。width72.28
\n
至于你的样本，用这么小的字体很难捕捉到。（相对而言）。将 for 增加到 1024px 或任何可以提供更清晰结果的值。分数和路径计算是如此之小，以至于人们会错过微妙的像素分数。1024 像素：
\n actualBoundingBoxAscent : 747\n \xe2\x80\x8bactualBoundingBoxDescent : 14\n \xe2\x80\x8bactualBoundingBoxLeft : -10\n \xe2\x80\x8bactualBoundingBoxRight : 1933.5\n \xe2\x80\x8bwidth : 1938.5\n考虑到总宽度，差异 (1933.5 + -10 = 1923.5) 仍然很小，但至少存在于服务对象中。
\n另一个示例+：
正如人们所观察到的，字形对文本的推进比它在绘制的像素中所占据的要多得多。甚至可能出现字形根本不推进文本的情况。它们仍然可以在文本中独立存在，但它的定义在某种程度上适用于之前的字形...例如d\xe1\xba\xa5u h\xe1\xbb\x8fi或上面的钩子宽度为零。
\n
但有些仍然被定义为高级角色，例如：
\n
该示例的另一个有趣之处在于，看看 Descent 是如何为负的（不会低于textBaseline），并且 Ascent 也存在。从逻辑上讲，当人们看到它时，但可能是一个陷阱。
\n可以扩大画布上的测试，但必须仔细观察。自从我在卡瓦斯工作以来已经太久了。这是一个近距离视图，但尚未验证或检查线条的精确度（精确到像素）。
\n如果正确，它会显示一个微妙的差异，即使用 24px 字体结束时宽度TeX会增加。
