例子
<!DOCTYPE HTML>
<html>
<head>
<style>
body
{
margin: 0px;
padding: 0px;
}
#myCanvas
{
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function ()
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width/2;
var y = canvas.height/2 - 10;
var text = "I am canvas!";
context.font = "30pt Calibri";
context.textAlign = "center";
context.fillStyle = "red";
context.fillText(text, x, y);
//get text metrics
var metrics = context.measureText(text);
var width = metrics.width;
context.font = "20pt Calibri";
context.textAlign = "center";
context.fillStyle = "#555";
context.fillText("(" + width + "px wide)", x, y + 40);
};
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="170"></canvas>
</body>
</html>
HTML5 Canvas Text Metrics
文本度量是使用mesaureText（）方法。
mesaureText（）方法需要HTML5中的文本字符串。
mesaureText（）方法是返回一个对象，mesaureText（）可用文本和文本字体作为上下文。
所以文本基线在HTML5中设置了以下值：top、middle、hanging、alphabetic、ideographic和bottom。
语法
<script>
var metrics = context.measureText('measure me!');
var width = metrics.width;
</script>
日期：2020-04-11 23:04:10 来源：oir作者：oir