From a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:46:50 +0100 Subject: unslug es: move --- files/es/dibujar_texto_usando_canvas/index.html | 67 ------------------------- 1 file changed, 67 deletions(-) delete mode 100644 files/es/dibujar_texto_usando_canvas/index.html (limited to 'files/es/dibujar_texto_usando_canvas/index.html') diff --git a/files/es/dibujar_texto_usando_canvas/index.html b/files/es/dibujar_texto_usando_canvas/index.html deleted file mode 100644 index 10a5970824..0000000000 --- a/files/es/dibujar_texto_usando_canvas/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Dibujar texto usando canvas -slug: Dibujar_texto_usando_canvas -tags: - - 'HTML:Canvas' -translation_of: Web/API/Canvas_API/Tutorial/Drawing_text ---- -

{{ Gecko_minversion_header(1.9) }} -{{ Fx_minversion_header(3) }} -El elemento <canvas> permite dibujar texto en él a través de una API experimental de Mozilla. -

-

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

- -

Demostraciones

-

Mira algunos ejemplos aquí, aquí, y aquí. -

-

Cambiar el tipo de letra actual

-

El atributo mozTextStyle contiene el estilo de texto actual. Usa la misma sintaxis que el especificado para las tipografías CSS. -

Ej: -

-
ctx.mozTextStyle = "20pt Arial"
-
-

Dibujar texto

-

Dibujar es muy sencillo. mozDrawText usa el estilo de texto actual, cualquiera que sea éste. Se usa el color de relleno del contexto como color del texto. -

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

Medir texto

-

A veces es útil saber qué tan ancho es un trozo 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 quieres tachar un texto, mozDrawText no te lo permite. En cambio, mozPathText agrega el tachado de texto al trazo actual. -

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

Supongamos ahora que quieres agregar un texto que se acomode a un trazo que dibujaste (una línea curva o algo parecido) es donde aparece mozTextAlongPath. Al contrario de otras funciones de texto, mozTextAlongPath necesita dos argumentos: el texto y qué se quiere hacer con él. mozTextAlongPath aproxima el trazo actual como una serie de segmentos de línea y ubica cada carácter encima de ese trazo. Los caracteres no son cambiados de tamaño o transformados de acuerdo a la curvatura de la base; toman la orientación del trazo a la mitad del carácter. -

Una vez que mozTextAlongPath sabe dónde está el carácter, busca el segundo parámetro para decidir qué hacer con él. Si el segundo parámetro es false, entonces dibuja el carácter como lo haría mozDrawText. Si es true, agrega el carácter al trazo actual, como lo hace mozPathText. Esto puede usarse para crear efectos únicos. -


-


-

-
-
-{{ languages( { "en": "en/Drawing_text_using_a_canvas", "fr": "fr/Dessin_de_texte_avec_canvas", "ja": "ja/Drawing_text_using_a_canvas", "pl": "pl/Rysowanie_tekstu_przy_u\u017cyciu_canvas" } ) }} -- cgit v1.2.3-54-g00ecf