/
index.md
161 lines (121 loc) · 5.93 KB
/
index.md
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
---
title: Drawing text
slug: Web/API/Canvas_API/Tutorial/Drawing_text
---
{{DefaultAPISidebar("Canvas API")}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}
Após entender como [aplicar estilos e cores](/pt-BR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) no capítulo anterior, nós veremos agora como desenhar texto dentro do contexto de uma canvas.
## Desenhando texto
O context de renderização da canvas fornece dois métodos para renderização textual:
- {{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}
- : Preenche com um determinado texto as cordenadas (x,y) recebidas. Opcionalmente com uma largura máxima para o desenho.
- {{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}
- : Traçeja um determinado texto nas cordenadas (x,y) recebidas. Opcionalmente com uma largura máxima para o desenho.
### Um exemplo com `fillText`
O texto a seguir é rederizado utilizando `fillStyle`.
```js
function draw() {
var ctx = document.getElementById("canvas").getContext("2d");
ctx.font = "48px serif";
ctx.fillText("Hello world", 10, 50);
}
```
```html hidden
<canvas id="canvas" width="300" height="100"></canvas>
```
```js hidden
draw();
```
{{EmbedLiveSample("A_fillText_example", 310, 110)}}
### Um exemplo com `strokeText`
O texto é preenchido usando o strokeStyle atual.
```js
function draw() {
var ctx = document.getElementById("canvas").getContext("2d");
ctx.font = "48px serif";
ctx.strokeText("Hello world", 10, 50);
}
```
```html hidden
<canvas id="canvas" width="300" height="100"></canvas>
```
```js hidden
draw();
```
{{EmbedLiveSample("A_strokeText_example", 310, 110)}}
## Estilo de Texto
Nos exemplos anteriores, já usamos a propriedade font para tornar o texto um pouco maior que o tamanho padrão. Existem mais algumas propriedades que permitem ajustar a maneira como o texto é exibido no canvas:
- {{domxref("CanvasRenderingContext2D.font", "font = value")}}
- : The current text style being used when drawing text. This string uses the same syntax as the [CSS](/pt-BR/docs/Web/CSS) {{cssxref("font")}} property. The default font is 10px sans-serif.
- {{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}
- : Text alignment setting. Possible values: `start`, `end`, `left`, `right` or `center`. The default value is `start`.
- {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}
- : Baseline alignment setting. Possible values: `top`, `hanging`, `middle`, `alphabetic`, `ideographic`, `bottom`. The default value is `alphabetic`.
- {{domxref("CanvasRenderingContext2D.direction", "direction = value")}}
- : Directionality. Possible values: `ltr`, `rtl`, `inherit`. The default value is `inherit`.
Essas propriedades podem ser similares para você, se você trabalhou com CSS antes.
O diagrama seguinte do [WHATWG](http://www.whatwg.org/) demonstra as várias baselines suportadas pela propriedade do `textBaseline`
### O exemplo de uma textBaseline
Edite o código abaixo e veja as atualizações em tempo real no canvas.
```js
ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello world", 0, 100);
```
```html hidden
<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
>
```
```js hidden
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);
```
{{ EmbedLiveSample('Playable_code', 700, 360) }}
## Advanced text measurements
In the case you need to obtain more details about the text, the following method allows you to measure it.
- {{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}
- : Returns a {{domxref("TextMetrics")}} object containing the width, in pixels, that the specified text will be when drawn in the current text style.
The following code snippet shows how you can measure a text and get its width.
```js
function draw() {
var ctx = document.getElementById("canvas").getContext("2d");
var text = ctx.measureText("foo"); // TextMetrics object
text.width; // 16;
}
```
## Notas específicas - Gecko
No Gecko (a engine de renderização do Firefox, Firefox OS e outras aplicações Mozilla), algumas APIs prefixadas foram implementadas em versões anteriores para escrever texto em um canvas. Essas APIs agora estão depreciadas e removidas, e não são mais garantidas para uso.
{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}