diff options
| author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:50:24 +0100 |
|---|---|---|
| committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:50:24 +0100 |
| commit | 2c2df5ea01eb5cd8b9ea226b2869337e59c5fe3e (patch) | |
| tree | 86ab4534d10092b293d4b7ab169fe1a8a2421bfa /files/pt-pt/desenhando_texto_usando_canvas | |
| parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
| download | translated-content-2c2df5ea01eb5cd8b9ea226b2869337e59c5fe3e.tar.gz translated-content-2c2df5ea01eb5cd8b9ea226b2869337e59c5fe3e.tar.bz2 translated-content-2c2df5ea01eb5cd8b9ea226b2869337e59c5fe3e.zip | |
unslug pt-pt: move
Diffstat (limited to 'files/pt-pt/desenhando_texto_usando_canvas')
| -rw-r--r-- | files/pt-pt/desenhando_texto_usando_canvas/index.html | 57 |
1 files changed, 0 insertions, 57 deletions
diff --git a/files/pt-pt/desenhando_texto_usando_canvas/index.html b/files/pt-pt/desenhando_texto_usando_canvas/index.html deleted file mode 100644 index 314ff20178..0000000000 --- a/files/pt-pt/desenhando_texto_usando_canvas/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -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> |
