Skip to content

Z
zetcode-zh

OpenDocCN / zetcode-zh
9 个月 前同步成功

通知 2
Star 157
Fork 40
Z
zetcode-zh

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
62.md 6.5 KB
Newer Older
W
2019-11-08 21:41:14  
wizardforcel 已提交
1 2 3 4 5 6 7 8 9 10 11 12 
# HTML5 画布中的文字

> 原文： [https://zetcode.com/gfx/html5canvas/text/](https://zetcode.com/gfx/html5canvas/text/)

在 HTML5 画布教程的这一部分中，我们将处理文本。

## 文字和字体

字符是表示诸如字母，数字或标点符号之类的项目的符号。 字形是用于呈现字符或字符序列的形状。 在拉丁字母中，字形通常代表一个字符。 在其他书写系统中，一个字符可能由几个字形组成，例如ť，ž，ú，ô。 这些是带有重音符号的拉丁字符。

可以使用各种字体在画布上绘制文本。 字体是一组具有特定字体设计和大小的字体字符。 各种字体包括 Helvetica，Georgia，Times 或 Verdana。 具有特定样式的字形的集合形成字体面。 字体的集合构成字体家族。
W
2019-11-14 21:06:04  
wizardforcel 已提交
13 
## 绘制文字
W
2019-11-08 21:41:14  
wizardforcel 已提交
14
W
2020-06-17 15:54:20  
wizardforcel 已提交
15 
HTML5 `canvas`上下文有两种绘制文本的方法：`strokeText()`和`fillText()`。 不同之处在于`fillText()`方法绘制文本的内部，而`strokeText()`方法绘制文本的轮廓。
W
2019-11-08 21:41:14  
wizardforcel 已提交
16 17 18 

`drawing_text.html`
W
2020-06-21 16:14:32  
wizardforcel 已提交
19 
```js
W
2019-11-08 21:41:14  
wizardforcel 已提交
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 
<!DOCTYPE html>
<html>
<head>
<title>HTML5 canvas drawing text</title>
<script>
    function draw() {
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        ctx.font = "28px serif";
        ctx.fillText("ZetCode", 15, 25);

        ctx.font = "36px sans-serif";
        ctx.strokeText("ZetCode", 30, 80);
    }      
</script>
</head>

<body onload="draw();">
    <canvas id="myCanvas" width="200" height="150">     
    </canvas>
</body>
</html> 

```

该示例在画布上绘制两个字符串。
W
2020-06-21 16:14:32  
wizardforcel 已提交
48 
```js
W
2019-11-08 21:41:14  
wizardforcel 已提交
49 50 51 52 
ctx.font = "28px serif";

```
W
2020-06-17 15:54:20  
wizardforcel 已提交
53 
`canvas`上下文`font`属性指定绘制文本时使用的当前文本样式。 我们指定字体大小和字体系列。
W
2019-11-08 21:41:14  
wizardforcel 已提交
54
W
2020-06-21 16:14:32  
wizardforcel 已提交
55 
```js
W
2019-11-08 21:41:14  
wizardforcel 已提交
56 57 58 59 
ctx.fillText("ZetCode", 15, 25);

```
W
2020-06-20 16:48:23  
wizardforcel 已提交
60 
`fillText()`方法的第一个参数是要渲染的文本。 接下来的两个参数是文本起点的 x 和 y 坐标。
W
2019-11-08 21:41:14  
wizardforcel 已提交
61 62 63 

![Drawing text](img/bae807fe0c204349165aa6fc57b03350.jpg)
W
2020-06-21 20:42:35  
wizardforcel 已提交
64 
图：绘制文本
W
2019-11-08 21:41:14  
wizardforcel 已提交
65 66 67 68 69 70 71 

## 字形

在下面的示例中，我们演示了几种字体属性。

`text_font.html`
W
2020-06-21 16:14:32  
wizardforcel 已提交
72 
```js
W
2019-11-08 21:41:14  
wizardforcel 已提交
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 
<!DOCTYPE html>
<html>
<head>
<title>HTML5 canvas drawing text</title>
<script>
    function draw() {
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        ctx.font = "normal bold 18px serif";
        ctx.fillText('nice', 10, 20); 

        ctx.font = "italic 18px serif";
        ctx.fillText('pretty', 70, 20);

        ctx.font = "small-caps bolder 18px serif";
        ctx.fillText('beautiful', 160, 20);  
    }      
</script>
</head>

<body onload="draw();">
    <canvas id="myCanvas" width="350" height="150">     
    </canvas>
</body>
</html> 

```

该示例绘制了三个具有不同字体样式，变体和粗细的单词。
W
2020-06-21 16:14:32  
wizardforcel 已提交
104 
```js
W
2019-11-08 21:41:14  
wizardforcel 已提交
105 106 107 108 109 110 
ctx.font = "normal bold 18px serif";

```

此行设置`normal`字体样式和`bold`字体粗细。
W
2020-06-21 16:14:32  
wizardforcel 已提交
111 
```js
W
2019-11-08 21:41:14  
wizardforcel 已提交
112 113 114 115 116 117 118 119 
ctx.font = "small-caps bolder 18px serif";

```

此行设置`small-caps`字体变体和`bolder`字体粗细。

![Text font](img/2f13db4304c027fabdf5d0d392a293dd.jpg)
W
2020-06-22 10:06:19  
wizardforcel 已提交
120 
图：文本字体
W
2019-11-08 21:41:14  
wizardforcel 已提交
121 122 123 

## 文字基线
W
2020-06-17 15:54:20  
wizardforcel 已提交
124 
Canvas 2D API 的`textBaseline`属性指定在绘制文本时使用的当前文本基线。 它接受以下值：顶部，底部，中间，字母，悬挂，表意。 默认为字母。
W
2019-11-08 21:41:14  
wizardforcel 已提交
125 126 127 

`text_baseline.html`
W
2020-06-21 16:14:32  
wizardforcel 已提交
128 
```js
W
2019-11-08 21:41:14  
wizardforcel 已提交
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 171 172 173 174 175 176 177 178 179 180 181 182 183 
<!DOCTYPE html>
<html>
<head>
<title>HTML5 canvas text baseline</title>
<style>
    canvas {border: 1px solid #bbbbbb}
</style>    
<script>
    function draw() {
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        ctx.translate(0.5, 0.5);
        ctx.setLineDash([2]);

        ctx.fillStyle = 'gray';
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(0, 100);
        ctx.lineTo(canvas.width, 100);
        ctx.stroke();

        ctx.font = '20px serif';
        ctx.textBaseline = "top";
        ctx.fillText('Top', 5, 100); 

        ctx.textBaseline = "bottom"; 
        ctx.fillText('Bottom', 60, 100); 

        ctx.textBaseline = "middle"; 
        ctx.fillText('Middle', 150, 100); 

        ctx.textBaseline = "alphabetic"; 
        ctx.fillText('Alphabetic', 240, 100); 

        ctx.textBaseline = "hanging"; 
        ctx.fillText('Hanging', 360, 100); 

        ctx.textBaseline = "ideographic";
        ctx.fillText('Ideographic', 460, 100);

    }    
</script>
</head>

<body onload="draw();">
    <canvas id="myCanvas" width="600" height="200">
    </canvas>
</body>
</html>

```

该示例使用所有可用的文本基线绘制字符串。
W
2020-06-21 16:14:32  
wizardforcel 已提交
184 
```js
W
2019-11-08 21:41:14  
wizardforcel 已提交
185 186 187 188 189 190 191 192 193 
ctx.textBaseline = "top";
ctx.fillText('Top', 5, 100); 

```

这些行在顶部基线模式下绘制文本。

![Text baseline](img/71f97b84c9523ce697f3b40026db7fa0.jpg)
W
2020-06-22 10:06:19  
wizardforcel 已提交
194 
图：文字基线
W
2019-11-08 21:41:14  
wizardforcel 已提交
195 196 197 

## 文字对齐
W
2020-06-20 16:48:23  
wizardforcel 已提交
198 
Canvas 2D API 的`textAlign`属性指定在绘制文本时使用的当前文本对齐方式。 对齐基于`fillText()`方法的 x 值。 可能的值为：左，右，居中，开始和结束。
W
2019-11-08 21:41:14  
wizardforcel 已提交
199 200 201 

`text_alignment.html`
W
2020-06-21 16:14:32  
wizardforcel 已提交
202 
```js
W
2019-11-08 21:41:14  
wizardforcel 已提交
203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 
<!DOCTYPE html>
<html>
<head>
<title>HTML5 canvas text alignment</title>
<style>
    canvas {border: 1px solid #bbbbbb}
</style>    
<script>
    function draw() {
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        var cw = canvas.width/2;

        ctx.fillStyle = 'gray';
        ctx.translate(0.5, 0.5);
        ctx.setLineDash([2]);

        ctx.beginPath();
        ctx.moveTo(cw, 0);
        ctx.lineTo(cw, canvas.height);
        ctx.stroke();

        ctx.font = "16px serif";

        ctx.textAlign = "center";
        ctx.fillText("center", cw, 20);

        ctx.textAlign = "start";
        ctx.fillText("start", cw, 60);

        ctx.textAlign = "end";
        ctx.fillText("end", cw, 100);

        ctx.textAlign = "left";
        ctx.fillText("left", cw, 140);

        ctx.textAlign = "right";
        ctx.fillText("right", cw, 180);
    }    
</script>
</head>

<body onload="draw();">
    <canvas id="myCanvas" width="350" height="200">
    </canvas>
</body>
</html>

```

该示例使用所有可用的文本对齐方式绘制文本。
W
2020-06-21 16:14:32  
wizardforcel 已提交
256 
```js
W
2019-11-08 21:41:14  
wizardforcel 已提交
257 258 259 260 
var cw = canvas.width/2;

```
W
2020-06-20 16:48:23  
wizardforcel 已提交
261 
我们计算画布中间点的 x 坐标。 我们的文字围绕这一点对齐。
W
2019-11-08 21:41:14  
wizardforcel 已提交
262
W
2020-06-21 16:14:32  
wizardforcel 已提交
263 
```js
W
2019-11-08 21:41:14  
wizardforcel 已提交
264 265 266 267 268 269 270 271 272 
ctx.beginPath();
ctx.moveTo(cw, 0);
ctx.lineTo(cw, canvas.height);
ctx.stroke();

```

为了更好地视觉理解，我们在画布的中间绘制了一条细的垂直线。
W
2020-06-21 16:14:32  
wizardforcel 已提交
273 
```js
W
2019-11-08 21:41:14  
wizardforcel 已提交
274 275 276 277 278 279 280 281 282 
ctx.textAlign = "center";
ctx.fillText("center", cw, 20);

```

这些线使文本水平居中。

![Text alignment](img/3c03c484b9ebf52952f13c6dcab00ad6.jpg)
W
2020-06-22 10:06:19  
wizardforcel 已提交
283 
图：文本对齐
W
2019-11-08 21:41:14  
wizardforcel 已提交
284 285 

在 HTML5 画布教程的这一部分中，我们介绍了文本。