diff options
Diffstat (limited to 'files/pt-pt/orphaned/desenhando_texto_usando_canvas/index.html')
| -rw-r--r-- | files/pt-pt/orphaned/desenhando_texto_usando_canvas/index.html | 58 |
1 files changed, 58 insertions, 0 deletions
diff --git a/files/pt-pt/orphaned/desenhando_texto_usando_canvas/index.html b/files/pt-pt/orphaned/desenhando_texto_usando_canvas/index.html new file mode 100644 index 0000000000..42035ff02a --- /dev/null +++ b/files/pt-pt/orphaned/desenhando_texto_usando_canvas/index.html @@ -0,0 +1,58 @@ +--- +title: Desenhando texto usando canvas +slug: orphaned/Desenhando_texto_usando_canvas +tags: + - HTML:Canvas + - PrecisaDeConteúdo +original_slug: Desenhando_texto_usando_canvas +--- +<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> |