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
|
---
title: Desenhando texto usando canvas
slug: Desenhando_texto_usando_canvas
tags:
- 'HTML:Canvas'
- PrecisaDeConteúdo
---
<p>{{ Gecko_minversion_header("1.9") }} O elemento <code><a href="/pt/HTML/Canvas" title="pt/HTML/Canvas"><canvas></a></code> dá suporte a desenho de texto através da API experimental Mozilla-specific.</p>
<h3 id="API" name="API">API</h3>
<pre class="eval">attribute DOMString mozTextStyle;
void mozDrawText(in DOMString textToDraw);
float mozMeasureText(in DOMString textToMeasure);
void mozPathText(in DOMString textToPath);
void mozTextAlongPath(in DOMString textToDraw, in boolean stroke);
</pre>
<h3 id="Notes" name="Notes">Notas</h3>
<ul>
<li>A fonte <em>default</em> é 12pt sans-serif.</li>
<li>Estas extensões de ainda não foram padronizadas pelo WHATWG.</li>
<li>You do not need a special context to use these; the 2D context works just fine.</li>
<li>All drawing is done using the current transform.</li>
<li>See {{ Bug(339553) }} if you'd like to read up on the implementation specifics.</li>
</ul>
<h3 id="Demonstrations" name="Demonstrations">Demonstrações</h3>
<p>Veja alguns exemplos <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273497">here</a>, <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273498">here</a>, and <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273499">here</a>.</p>
<h3 id="Changing_the_current_font" name="Changing_the_current_font">Alterando a fonte corrente</h3>
<p>The <code>mozTextStyle</code> attribute reflects the current text style. It uses the same syntax as the <a href="/pt/CSS/font" title="pt/CSS/font">CSS font</a> specifier.</p>
<p>Ex:</p>
<pre class="eval">ctx.mozTextStyle = "20pt Arial"
</pre>
<h3 id="Drawing_text" name="Drawing_text">Desenhando o texto</h3>
<p>Drawing is very simple. <code>mozDrawText</code> uses whatever the current text style is. The context's fill color is used as the text color.</p>
<pre class="eval">ctx.translate(10, 50);
ctx.fillStyle = "Red";
ctx.mozDrawText("Sample String");
</pre>
<h3 id="Measuring_text" name="Measuring_text">Medindo o texto</h3>
<p>As vezes é de grande valia saber a largura de um bit de texto em particular (para centralizá-lo em uma janela).</p>
<pre class="eval">var text = "Sample String";
var width = ctx.canvas.width;
var len = ctx.mozMeasureText(text);
ctx.translate(len/2, 0);
ctx.mozDrawText(text);
</pre>
<h3 id="Text.2Fpath_interaction" name="Text.2Fpath_interaction">Text/path interaction</h3>
<p>If you want to stroke text, <code>mozDrawText</code> doesn't let you. However, <code>mozPathText</code> adds the strokes from the text to the current path.</p>
<pre class="eval">ctx.fillStyle = "green";
ctx.strokeStyle = "black";
ctx.mozPathText("Sample String");
ctx.fill()
ctx.stroke()
</pre>
<p>Now say you have a path that you want to add text along (say a curved line or something); this is where <code>mozTextAlongPath</code> comes in. Unlike the other text functions, <code>mozTextAlongPath</code> takes two arguments: the text and what to do with it. <code>mozTextAlongPath</code> approximates the current path as a series of line segments and places each glyph along that flattened path. The glyphs are not scaled or transformed according to the curvature of their baseline; they take on the orientation of the flattened path at the midpoint of the glyph.</p>
<p>Once <code>mozTextAlongPath</code> knows where the glyphs are, it looks at the second parameter to decide what to do with them. If the second parameter is <code>false</code>, then it will draw the glyphs just like <code>mozDrawText</code> does. If it is <code>true</code>, then it will add the glyphs to the current path, just like <code>mozPathText</code> does. This can be used to create some unique effects.</p>
<p><span class="comment">Categorias</span></p>
<p><span class="comment">Interwiki Language Links</span></p>
<p>{{ languages( { "en": "en/Drawing_text_using_a_canvas", "es": "es/Dibujar_texto_usando_canvas", "fr": "fr/Dessin_de_texte_avec_canvas", "ja": "ja/Drawing_text_using_a_canvas" } ) }}</p>
|
