HTML5画布文本的文本标准,我们可以使用measureText()方法返回一个对象包含宽度属性。这个方法需要一个文本字符串,并返回一个度量对象基于提供的文本和当前文本字体分配给上下文。
注意:由于高度的像素等于中的文本字体大小在pts字体和字体属性定义画布的背景下,度量对象measureText()不提供一个高度度量。
<!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>