简而言之，给定一个字体（包括大小、重量等）和一个字符串，有没有办法使用 JavaScript 提取相对于第一个字母左上角的像素坐标数组？
例如I 可能会变成
[
[0,0],
[0,1],
...
]
编辑：我不是在寻找边界框，而是在寻找构成文本的每个像素的坐标。我需要这些信息，以便稍后使用正方形重新创建文本。
【问题讨论】：
标签： javascript canvas text coordinates pixels
可以，可以使用canvas元素获取text metrics：
// setup canvas
var c = document.createElement("canvas"),
ctx = c.getContext("2d");
// define (pre-loaded) font:
ctx.font = "bold 16px sans-serif";
// get metrics
var m = ctx.measureText("Hello");
metrics 对象会给你宽度和高度等。但是 - 目前大多数浏览器只支持宽度。有一个 poly-fill 将涵盖您需要的上升和下降等内容。
另一种方法是扫描位图以检测文本转换的矩形。我在这里给出了一个涵盖这种技术的答案：
Javascript Method to detect area of a PNG that is not transparent
此外，如果您只需要文本的边界框（不是文本本身的像素精确起点），您可以使用 DOM 元素来获取该框的宽度和高度。这是一种方法：
Use Javascript to get Maximum font size in canvas
澄清后更新：用于从位图中提取像素并将其转换为点：
【讨论】：