Revision 165980 of Dibujar texto usando canvas

  • Enlace amigable (slug) de la revisión: Dibujar_texto_usando_canvas
  • Título de la revisión: Dibujar texto usando canvas
  • Id de la revisión: 165980
  • Creada:
  • Creador: Debianpc
  • ¿Es la revisión actual? No
  • Comentario /* Text/path interaction */
Etiquetas: 

Contenido de la revisión

{{wiki.template('Traducción', [ "inglés", "Drawing_text using a canvas", "en" ])}}


{{template.Gecko_minversion_header(1.9)}} {{template.Fx_minversion_header(3)}} The <canvas> element supports drawing text on it via experimental Mozilla-specific APIs.

API

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);

Notas

  • La fuente predeterminada es sans-serif 12pt.
  • Estas extensiones de texto no están aún estandarizadas por WHATWG.
  • No necesita un contexto especial para usarlas; el contexto 2D funciona bien.
  • Todos los dibujes se realizan usando la transformación actual.
  • Mire el {{template.Bug(339553)}} si quiere leer más sobre las implementaciones específicas.

Demostraciones

Mire algunos ejemplos aquí, aquí, y aquí.

Cambiar la fuente actual

El atributo mozTextStyle muestra el estilo de texto actual. Usa la misma sintaxis que el especificado para las fuentes CSS.

Ej:

ctx.mozTextStyle = "20pt Arial"

Dibujar texto

Dibujar es muy simple. mozDrawText usa el estilo de texto actual, cualquiera este sea. El relleno de color del contexto es usado como el color del texto.

ctx.translate(10, 50);
ctx.fillStyle = "Red";
ctx.mozDrawText("Sample String");

Midiendo texto

A veces es útil saber qué tan grande es una parte de texto en particular (para centrarlo en una ventana, por ejemplo).

var text = "Sample String";
var width = ctx.canvas.width;
var len = ctx.mozMeasureText(text);
ctx.translate(len/2, 0);
ctx.mozDrawText(text);

Interacción texto/trazo

Si quiere If you want to stroke text, mozDrawText doesn't let you. However, mozPathText adds the strokes from the text to the current path.

ctx.fillStyle = "green";
ctx.strokeStyle = "black";
ctx.mozPathText("Sample String");
ctx.fill()
ctx.stroke()

Now say you have a path that you want to add text along (say a curved line or something); this is where mozTextAlongPath comes in. Unlike the other text functions, mozTextAlongPath takes two arguments: the text and what to do with it. mozTextAlongPath 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.

Once mozTextAlongPath knows where the glyphs are, it looks at the second parameter to decide what to do with them. If the second parameter is false, then it will draw the glyphs just like mozDrawText does. If it is true, then it will add the glyphs to the current path, just like mozPathText does. This can be used to create some unique effects.


{{ wiki.languages( { "en": "en/Drawing_text_using_a_canvas", "fr": "fr/Dessin_de_texte_avec_canvas", "ja": "ja/Drawing_text_using_a_canvas" } ) }}

Fuente de la revisión

<p>{{wiki.template('Traducción', [ "inglés", "Drawing_text using a canvas", "en" ])}}
</p><p><br>
{{template.Gecko_minversion_header(1.9)}}
{{template.Fx_minversion_header(3)}}
The <code><a href="es/HTML/Canvas">&lt;canvas&gt;</a></code> element supports drawing text on it via experimental Mozilla-specific APIs.
</p>
<h3 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 name="Notas"> Notas </h3>
<ul><li> La fuente predeterminada es sans-serif 12pt.
</li><li> Estas extensiones de texto no están aún estandarizadas por WHATWG.
</li><li> No necesita un contexto especial para usarlas; el contexto 2D funciona bien.
</li><li> Todos los dibujes se realizan usando la transformación actual.
</li><li> Mire el {{template.Bug(339553)}} si quiere leer más sobre las implementaciones específicas.
</li></ul>
<h3 name="Demostraciones"> Demostraciones </h3>
<p>Mire algunos ejemplos <a class="external" href="https://bugzilla.mozilla.org/attachment.cgi?id=273497">aquí</a>, <a class="external" href="https://bugzilla.mozilla.org/attachment.cgi?id=273498">aquí</a>, y <a class="external" href="https://bugzilla.mozilla.org/attachment.cgi?id=273499">aquí</a>.
</p>
<h3 name="Cambiar_la_fuente_actual"> Cambiar la fuente actual </h3>
<p>El atributo <code>mozTextStyle</code> muestra el estilo de texto actual. Usa la misma sintaxis que el especificado para las <a href="es/CSS/font">fuentes CSS</a>.
</p><p>Ej:
</p>
<pre class="eval">ctx.mozTextStyle = "20pt Arial"
</pre>
<h3 name="Dibujar_texto"> Dibujar texto </h3>
<p>Dibujar es muy simple. <code>mozDrawText</code> usa el estilo de texto actual, cualquiera este sea. El relleno de color del contexto es usado como el color del texto.
</p>
<pre class="eval">ctx.translate(10, 50);
ctx.fillStyle = "Red";
ctx.mozDrawText("Sample String");
</pre>
<h3 name="Midiendo_texto"> Midiendo texto </h3>
<p>A veces es útil saber qué tan grande es una parte de texto en particular (para centrarlo en una ventana, por ejemplo).
</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 name="Interacci.C3.B3n_texto.2Ftrazo"> Interacción texto/trazo </h3>
<p>Si quiere 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><br>
</p>
<div class="noinclude">
</div>
{{ wiki.languages( { "en": "en/Drawing_text_using_a_canvas", "fr": "fr/Dessin_de_texte_avec_canvas", "ja": "ja/Drawing_text_using_a_canvas" } ) }}
Revertir a esta revisión