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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
---
title: 绘制文本
slug: Web/API/Canvas_API/Tutorial/Drawing_text
translation_of: Web/API/Canvas_API/Tutorial/Drawing_text
---
<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</div>
<div class="summary">
<p>在前一个章节中看过 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">应用样式和颜色</a> 之后, 我们现在来看一下如何在canvas中绘制文本</p>
</div>
<h2 id="绘制文本">绘制文本</h2>
<p>canvas 提供了两种方法来渲染文本:</p>
<dl>
<dt>{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}</dt>
<dd>在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.</dd>
<dt>{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}</dt>
<dd>在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.</dd>
</dl>
<h3 id="A_fillText_example" name="A_fillText_example">一个填充文本的示例</h3>
<p>文本用当前的填充方式被填充：</p>
<pre class="brush: js notranslate">function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = "48px serif";
ctx.fillText("Hello world", 10, 50);
}</pre>
<div class="hidden">
<pre class="brush: html notranslate"><canvas id="canvas" width="300" height="100"></canvas></pre>
<pre class="brush: js notranslate">draw();</pre>
</div>
<p>{{EmbedLiveSample("A_fillText_example", 310, 110)}}</p>
<h3 id="A_strokeText_example" name="A_strokeText_example">一个文本边框的示例</h3>
<p>文本用当前的边框样式被绘制：</p>
<pre class="brush: js;highlight[4] notranslate">function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = "48px serif";
ctx.strokeText("Hello world", 10, 50);
}</pre>
<div class="hidden">
<pre class="brush: html notranslate"><canvas id="canvas" width="300" height="100"></canvas></pre>
<pre class="brush: js notranslate">draw();</pre>
</div>
<p>{{EmbedLiveSample("A_strokeText_example", 310, 110)}}</p>
<h2 id="有样式的文本">有样式的文本</h2>
<p>在上面的例子用我们已经使用了 <code>font</code> 来使文本比默认尺寸大一些. 还有更多的属性可以让你改变canvas显示文本的方式：</p>
<dl>
<dt>{{domxref("CanvasRenderingContext2D.font", "font = value")}}</dt>
<dd>当前我们用来绘制文本的样式. 这个字符串使用和 <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref("font")}} 属性相同的语法. 默认的字体是 <code>10px sans-serif</code>。</dd>
<dt>{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}</dt>
<dd>文本对齐选项. 可选的值包括：<code>start</code>, <code>end</code>, <code>left</code>, <code>right</code> or <code>center</code>. 默认值是 <code>start</code>。</dd>
<dt>{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}</dt>
<dd>基线对齐选项. 可选的值包括：<code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code>, <code>ideographic</code>, <code>bottom</code>。默认值是 <code>alphabetic。</code></dd>
<dt>{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}</dt>
<dd>文本方向。可能的值包括：<code>ltr</code>, <code>rtl</code>, <code>inherit</code>。默认值是 <code>inherit<font face="Thread-00001740-Id-000000e0">。</font></code></dd>
</dl>
<p>如果你之前使用过CSS，那么这些选项你会很熟悉。</p>
<p>下面的图片（from the <a class="external" href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a>）展示了textBaseline属性支持的不同的基线情况：</p>
<p><img alt="The top of the em square is
roughly at the top of the glyphs in a font, the hanging baseline is
where some glyphs like आ are anchored, the middle is half-way
between the top of the em square and the bottom of the em square,
the alphabetic baseline is where characters like Á, ÿ,
f, and Ω are anchored, the ideographic baseline is
where glyphs like 私 and 達 are anchored, and the bottom
of the em square is roughly at the bottom of the glyphs in a
font. The top and bottom of the bounding box can be far from these
baselines, due to glyphs extending far outside the em square." src="http://www.whatwg.org/specs/web-apps/current-work/images/baselines.png"></p>
<h3 id="textBaseline例子">textBaseline例子</h3>
<p>编辑下面的代码，看看它们在canvas中的变化：</p>
<pre class="brush: js;highlight[2] notranslate">ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello world", 0, 100);
</pre>
<div class="hidden">
<h6 id="Playable_code" name="Playable_code">Playable code</h6>
<pre class="brush: html notranslate"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello world", 0, 100);</textarea>
</pre>
<pre class="brush: js notranslate">var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener("click", function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener("click", function() {
textarea.focus();
})
textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
</pre>
</div>
<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
<h2 id="预测量文本宽度">预测量文本宽度</h2>
<p>当你需要获得更多的文本细节时，下面的方法可以给你测量文本的方法。</p>
<dl>
<dt>{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}</dt>
<dd>将返回一个 {{domxref("TextMetrics")}}对象的宽度、所在像素，这些体现文本特性的属性。</dd>
</dl>
<p>下面的代码段将展示如何测量文本来获得它的宽度：</p>
<pre class="brush: js;highlight[3] notranslate">function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var text = ctx.measureText("foo"); // TextMetrics object
text.width; // 16;
}
</pre>
<h2 id="Geoko特性说明">Geoko特性说明</h2>
<p>在Geoko（Firefox，Firefox OS及基于Mozilla的应用的渲染引擎）中，曾有一些版本较早的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D#Prefixed_APIs">API</a> 实现了在canvas上对文本作画的功能，但它们现在已不再使用。</p>
<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</p>
|
