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
|
---
title: CanvasRenderingContext2D.textBaseline
slug: Web/API/CanvasRenderingContext2D/textBaseline
tags:
- Canvas
- CanvasRenderingContext2D
translation_of: Web/API/CanvasRenderingContext2D/textBaseline
---
<div>{{APIRef}}</div>
<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.textBaseline</code></strong> 是 Canvas 2D API 描述绘制文本时，当前文本基线的属性。</p>
<blockquote>
<p>译者注：决定文字垂直方向的对齐方式。</p>
</blockquote>
<h2 id="语法">语法</h2>
<pre class="syntaxbox"><var><em>ctx</em>.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";</var>
</pre>
<h3 id="选项">选项</h3>
<p>有效值：</p>
<dl>
<dt>top</dt>
<dd>文本基线在文本块的顶部。</dd>
<dt>hanging</dt>
<dd>文本基线是悬挂基线。</dd>
<dt>middle</dt>
<dd>文本基线在文本块的中间。</dd>
<dt>alphabetic</dt>
<dd>文本基线是标准的字母基线。</dd>
<dt>ideographic</dt>
<dd>文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。</dd>
<dt>bottom</dt>
<dd>文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。</dd>
</dl>
<p>默认值是 <code>alphabetic。</code></p>
<h2 id="示例">示例</h2>
<h3 id="Using_the_textBaseline_property" name="Using_the_textBaseline_property">使用 <code>textBaseline</code> 属性</h3>
<p>这是一段简单的代码片段，使用 <code>textBaseline</code> 属性设置不同的文本基线。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><canvas id="canvas" width="550" height="500"></canvas></pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js">const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'];
ctx.font = '36px serif';
ctx.strokeStyle = 'red';
baselines.forEach(function (baseline, index) {
ctx.textBaseline = baseline;
let y = 75 + index * 75;
ctx.beginPath();
ctx.moveTo(0, y + 0.5);
ctx.lineTo(550, y + 0.5);
ctx.stroke();
ctx.fillText('Abcdefghijklmnop (' + baseline + ')', 0, y);
});</pre>
<div class="hidden">
<h6 id="Playable_code" name="Playable_code">Playable code</h6>
<pre class="brush: html"><canvas id="canvas" width="550" height="500"></canvas></pre>
<pre class="brush: js">const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'];
ctx.font = '36px serif';
ctx.strokeStyle = 'red';
baselines.forEach(function (baseline, index) {
ctx.textBaseline = baseline;
let y = 75 + index * 75;
ctx.beginPath();
ctx.moveTo(0, y + 0.5);
ctx.lineTo(550, y + 0.5);
ctx.stroke();
ctx.fillText('Abcdefghijklmnop (' + baseline + ')', 0, y);
});</pre>
</div>
<h4 id="结果">结果</h4>
<p>{{ EmbedLiveSample('Playable_code', 700, 550) }}</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-textbaseline", "CanvasRenderingContext2D.textBaseline")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div class="hidden">
<p>此页面上的兼容性表是根据结构化数据生成的。 如果您想提供数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并向我们发送请求请求。</p>
</div>
<p>{{Compat("api.CanvasRenderingContext2D.textBaseline")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li>接口定义，{{domxref("CanvasRenderingContext2D")}}.</li>
</ul>
|
