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
163
164
165
166
167
168
169
170
|
---
title: CanvasRenderingContext2D.strokeText()
slug: Web/API/CanvasRenderingContext2D/strokeText
translation_of: Web/API/CanvasRenderingContext2D/strokeText
---
<div>{{APIRef}}</div>
<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeText()</code></strong> 是 Canvas 2D API 在给定的 <em>(x, y) </em>位置绘制文本的方法。如果提供了表示最大值的第四个参数，文本将会缩放适应宽度。</p>
<p>参见 {{domxref("CanvasRenderingContext2D.fillText()")}} 方法填充文本。</p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox">void <var><em>ctx</em>.strokeText(text, x, y [, maxWidth]);</var>
</pre>
<h3 id="参数">参数</h3>
<dl>
<dt><code>text</code></dt>
<dd>使用当前 {{domxref("CanvasRenderingContext2D.font","font")}}，{{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}，{{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}和{{domxref("CanvasRenderingContext2D.direction","direction")}} 的值对文本进行渲染。</dd>
</dl>
<dl>
<dt><code>x</code></dt>
<dd>文本起始点的 x 轴坐标。</dd>
<dt><code>y</code></dt>
<dd>文本起始点的 y 轴坐标。</dd>
<dt><code>maxWidth</code> {{optional_inline}}</dt>
<dd>需要绘制的最大宽度。如果指定了值，并且经过计算字符串的宽度比最大宽度还要宽，字体为了适应会使用一个水平缩小的字体（如果通过水平缩放当前的字体，可以进行有效的或者合理可读的处理）或者小号的字体。</dd>
</dl>
<h2 id="示例">示例</h2>
<h3 id="使用_strokeText_方法">使用 <code>strokeText</code> 方法</h3>
<p>这是一个使用 <code>strokeText</code> 方法的简单的代码片段。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><canvas id="canvas"></canvas>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "48px serif";
ctx.strokeText("Hello world", 50, 100);
</pre>
<p>修改下面的代码并在线查看 canvas 的变化：</p>
<div class="hidden">
<h6 id="Playable_code">Playable code</h6>
<pre class="brush: html"><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.strokeText("Hello world", 50, 100);</textarea>
</pre>
<pre class="brush: js">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>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatGeckoDesktop("1.9.1") }}</td>
<td>{{ CompatIE(9) }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatGeckoMobile("1.9.1") }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="参见">参见</h2>
<ul>
<li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li>
<li>{{domxref("CanvasRenderingContext2D.fillText()")}}</li>
</ul>
|
