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 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 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 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 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 

HTML5 canvas 上下文有两种绘制文本的方法：`strokeText()`和`fillText()`。 不同之处在于`fillText()`方法绘制文本的内部，而`strokeText()`方法绘制文本的轮廓。

`drawing_text.html`

```
<!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> 

```

该示例在画布上绘制两个字符串。

```
ctx.font = "28px serif";

```

canvas 上下文`font`属性指定绘制文本时使用的当前文本样式。 我们指定字体大小和字体系列。

```
ctx.fillText("ZetCode", 15, 25);

```

`fillText()`方法的第一个参数是要渲染的文本。 接下来的两个参数是文本起点的 x 和 y 坐标。

![Drawing text](img/bae807fe0c204349165aa6fc57b03350.jpg)

Figure: Drawing text

## 字形

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

`text_font.html`

```
<!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> 

```

该示例绘制了三个具有不同字体样式，变体和粗细的单词。

```
ctx.font = "normal bold 18px serif";

```

此行设置`normal`字体样式和`bold`字体粗细。

```
ctx.font = "small-caps bolder 18px serif";

```

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

![Text font](img/2f13db4304c027fabdf5d0d392a293dd.jpg)

Figure: Text font

## 文字基线

canvas 2D API 的`textBaseline`属性指定在绘制文本时使用的当前文本基线。 它接受以下值：顶部，底部，中间，字母，悬挂，表意。 默认为字母。

`text_baseline.html`

```
<!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>

```

该示例使用所有可用的文本基线绘制字符串。

```
ctx.textBaseline = "top";
ctx.fillText('Top', 5, 100); 

```

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

![Text baseline](img/71f97b84c9523ce697f3b40026db7fa0.jpg)

Figure: Text baseline

## 文字对齐

Canvas 2D API 的`textAlign`属性指定在绘制文本时使用的当前文本对齐方式。 对齐基于`fillText()`方法的 x 值。 可能的值为：左，右，居中，开始和结束。

`text_alignment.html`

```
<!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>

```

该示例使用所有可用的文本对齐方式绘制文本。

```
var cw = canvas.width/2;

```

我们计算画布中间点的 x 坐标。 我们的文字围绕这一点对齐。

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

```

为了更好地视觉理解，我们在画布的中间绘制了一条细的垂直线。

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

```

这些线使文本水平居中。

![Text alignment](img/3c03c484b9ebf52952f13c6dcab00ad6.jpg)

Figure: Text alignment

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