要获取HTML5 Canvas文本的文本度量标准，我们可以使用canvas上下文的measureText（）方法，该方法返回包含width属性的对象。 此方法需要文本字符串，并根据提供的文本和分配给上下文的当前文本字体返回度量对象。
注意：由于使用canvas上下文的font属性定义字体时，文本的高度（以像素为单位）等于以pts为单位的字体大小，因此从measureText（）返回的metrics对象不提供高度指标。
html代码：
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2 - 10;
var text = 'Hello World!';
context.font = '30pt Calibri';
context.textAlign = 'center';
context.fillStyle = 'blue';
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>
</body>
</html>
1230博客
热门推荐：