10. 度量文字宽高

图表上需要将文字标签(比如轴的刻度标签)绘制在Canvas的特定位置上。
在位置的计算中,需要文字的宽高数据。
Canvas上下文环境提供了计算文字宽高的API。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>利用canvas环境提供的函数来度量文字尺寸</title>
</head>
<body>

<script>

var font = '14px Microsoft YaHei' ;
var text = '石油' ;

//动态生成canvas对象,获取上下文
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

//设置字体,这是度量文字宽度的必备条件
context.font = font ;

//度量文字
//宽度: 用API【measureText】来获取
//高度: 用特定文字【W】的宽度的7/6来近似模拟
var w = context.measureText( text).width;
var h = context.measureText('M').width * 7/6 ;

//输出结果
console.log( 'text = ' + text + ' width=' +w + ' height=' +h) ;

</script>

</body>
</html>