非常教程

HTML 参考手册教程

HTML canvas measureText() 方法

HTML canvas measureText() 方法

HTML canvas measureText() 方法

HTML canvas measureText() 方法

HTML canvas 参考手册

实例

在画布上输出文本之前,检查字体的宽度:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
var txt="Hello World"
ctx.fillText("width:" + ctx.measureText(txt).width,10,50)
ctx.fillText(txt,10,100);

尝试一下 »

浏览器支持

HTML canvas measureText() 方法

HTML canvas measureText() 方法

HTML canvas measureText() 方法

HTML canvas measureText() 方法

HTML canvas measureText() 方法

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 measureText() 方法。

注意:Internet Explorer 8 及之前的版本不支持 <canvas> 元素。


定义和用法

measureText()方法返回一个对象,该对象包含以像素计的指定字体宽度。

提示:如果您需要在文本向画布输出之前,就了解文本的宽度,那么请使用该方法。

JavaScript 语法: context.measureText(text).width;

参数值

参数 描述
text 要测量的文本。


HTML canvas measureText() 方法

HTML canvas 参考手册
HTML canvas measureText() 方法
HTML 参考手册

HTML 参考手册提供了完整的 HTML 标签、属性、事件列表,并配有具体的实例演示,另外还讲解了拾色器、字符集等相关内容。

HTML 参考手册目录

1.HTML 事件
2.HTML 全局属性
3.HTML 标签列表(功能排序)
4.HTML 标签列表(字母排序)
5.HTML <option> 标签
6.HTML <output> 标签
7.HTML <p> 标签
8.HTML <param> 标签
9.HTML <pre> 标签
10.HTML 拾色器
11.HTML 颜色名
12.HTML 有效DOCTYPES
13.HTML 音频/视频
14.HTML 画布
15.HTML5 <mark> 标签
16.HTML <menu> 标签
17.HTML <meta> 标签
18.HTML <meter> 标签
19.HTML <nav> 标签
20.HTML <noframes> 标签
21.HTML <noscript> 标签
22.HTML <object> 标签
23.HTML <ol> 标签
24.HTML <optgroup> 标签
25.HTML <img> 标签
26.HTML <input> 标签
27.HTML <ins> 标签
28.HTML <kbd> 标签
29.HTML5 <keygen> 标签
30.HTML <legend> 标签
31.HTML <li> 标签
32.HTML <label> 标签
33.HTML <link>标签
34.HTML <map> 标签
35.HTML <area> 标签
36.HTML <applet> 标签
37.HTML <address> 标签
38.HTML <acronym> 标签
39.HTML <abbr> 标签
40.HTML <a> 标签
41.HTML <!DOCTYPE> 声明
42.HTML <button> 标签
43.HTML <i> 标签
44.HTML <iframe> 标签
45.HTML <blockquote> 标签
46.HTML <big> 标签
47.HTML <bdo> 标签
48.HTML <bdi> 标签
49.HTML <basefont> 标签
50.HTML <base> 标签
51.HTML <b> 标签
52.HTML <audio> 标签
53.HTML <aside> 标签
54.HTML <article> 标签
55.HTML <command> 标签
56.HTML <colgroup> 标签
57.HTML <col> 标签
58.HTML <code> 标签
59.HTML <cite> 标签
60.HTML <center> 标签
61.HTML <caption> 标签
62.HTML <canvas> 标签
63.HTML <br> 标签
64.HTML <body> 标签
65.HTML <dt> 标签
66.HTML <dl> 标签
67.HTML <div> 标签
68.HTML <dir> 标签
69.HTML <dialog> 标签
70.HTML <dfn> 标签
71.HTML <details> 标签
72.HTML <del> 标签
73.HTML <dd> 标签
74.HTML <datalist> 标签
75.HTML <frameset> 标签
76.HTML <frame> 标签
77.HTML <form> 标签
78.HTML <footer> 标签
79.HTML <font> 标签
80.HTML <figure> 标签
81.HTML <figcaption> 标签
82.HTML <fieldset> 标签
83.HTML <embed> 标签
84.HTML <em> 标签
85.HTML URL 编码参考手册
86.HTML 符号实体参考手册
87.HTML ISO-8859-1 参考手册
88.HTML ASCII 参考手册
89.HTML 字符集
90.HTML <hr> 标签
91.HTML <h1> – <h6> 标签
92.HTML <hgroup> 标签
93.HTML <header> 标签
94.HTML <head> 标签
95.HTML <q> 标签
96.HTML5 <progress> 标签
97.HTML <html> 标签
98.HTML <!–…–> 注释标签
99.键盘快捷键
100.HTTP 方法:GET 对比 POST