canvas标签measureText测量文本对象。
测量文本宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制填色文本-HTML教程www.xuandaima.com</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font = "24px serif";
var txt="炫代码";
ctx.fillText(txt,10,50);
ctx.fillText("'炫代码'的显示宽度:" + ctx.measureText(txt).width,10,100);
</script>
</body>
</html>| document.getElementById("myCanvas2") | 返回文档id属性为"myCanvas2"的对象 |
| getContext("2d") | getContext() 返回画布上绘图的环境。getContext("2d") 返回绘制类型（2 维）的环境，未来可能会支持3维，但现在支持2维。 |
font = "24px serif"; | 设置字体大小为24像素，字体为“serif”。 |
| txt="炫代码" | 赋值给变量txt（用于重复调用，javascript语法） |
| fillText(txt,10,50) | 绘制txt变量字体为填充和字体位置，X轴为“10”Y轴为“50”。 |
| fillText("'炫代码'的显示宽度:" + ctx.measureText(txt).width,10,100) | 输出'炫代码'的显示宽度:，加上txt变量字体宽度结果在X轴为“10”Y轴为“100”的位置显示。 |
 | 该对象包含以像素计的指定字体宽度，和font属性关联，一个字的字体大小是24像素，所以三个字则是乘以3等于72。 |
注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。
context.measureText(text);
| 参数 | 描述 |
|---|---|
| text | 需要测试对象。 |
textMetrics返回对象
| 属性名 | 描述 |
|---|---|
| width | 考虑当前文本的字的尺寸，字体之后的文本宽度,一般最常用的就只有这个width了。 |
| actualBoundingBoxLeft | 给出从 CanvasRenderingContext2D.textAlign 属性给定的对齐点到给定文本的边界矩形左侧的距离。该距离是平行于基线测量的。 |
| actualBoundingBoxRight | 属性给出的对齐点到给定文本边界矩形右侧的距离。该距离是平行于基线测量的。 |
| actualBoundingBoxAscent | CanvasRenderingContext2D.textBaseline 属性指示的水平线到用于渲染文本的所有字体的最高边界矩形的顶部的距离。 |
| actualBoundingBoxDescent | 表示从 CanvasRenderingContext2D.textBaseline 属性指示的水平线到用于渲染文本的所有字体的边界矩形的底部的距离。 |
