From 95aca4b4d8fa62815d4bd412fff1a364f842814a Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Thu, 29 Apr 2021 16:16:42 -0700 Subject: remove retired locales (#699) --- .../canvas_api/tutorial/drawing_text/index.html | 166 --------------------- 1 file changed, 166 deletions(-) delete mode 100644 files/ca/web/api/canvas_api/tutorial/drawing_text/index.html (limited to 'files/ca/web/api/canvas_api/tutorial/drawing_text') diff --git a/files/ca/web/api/canvas_api/tutorial/drawing_text/index.html b/files/ca/web/api/canvas_api/tutorial/drawing_text/index.html deleted file mode 100644 index b7bd981cd9..0000000000 --- a/files/ca/web/api/canvas_api/tutorial/drawing_text/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Dibuixar text -slug: Web/API/Canvas_API/Tutorial/Drawing_text -tags: - - Canvas - - Graphics - - Intermediate - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Drawing_text -original_slug: Web/API/Canvas_API/Tutorial/Dibuixar_text ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}
- -
-

Després d'haver vist com aplicar estils i colors en el capítol anterior, ara veurem com dibuixar text sobre canvas.

-
- -

Dibuixar text

- -

El context de representació de canvas proporciona dos mètodes per representar el text:

- -
-
{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}
-
Omple un text donat en la posició donada (x, y). Opcionalment amb ample màxim per dibuixar.
-
{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}
-
Traça un text donat en la posició donada (x, y). Opcionalment amb ample màxim per dibuixar.
-
- -

Un exemple de fillText

- -

El text s'omple usant l'actual fillStyle.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.font = '48px serif';
-  ctx.fillText('Hello world', 10, 50);
-}
- - - -

{{EmbedLiveSample("A_fillText_example", 310, 110)}}

- -

Un exemple de strokeText

- -

El text s'omple usant l'actual strokeStyle.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.font = '48px serif';
-  ctx.strokeText('Hello world', 10, 50);
-}
- - - -

{{EmbedLiveSample("A_strokeText_example", 310, 110)}}

- -

Estil de text

- -

En els exemples anteriors ja hem fet ús de la propietat font per fer el text una mica més gran que la grandària predeterminada. Hi ha algunes propietats més que permeten ajustar la forma en què el text es mostra en el llenç:

- -
-
{{domxref("CanvasRenderingContext2D.font", "font = value")}}
-
L'estil de text actual que s'utilitza en dibuixar text. Aquesta cadena utilitza la mateixa sintaxi que la propietat CSS {{cssxref("font")}}. La font predeterminada és 10px sans-serif.
-
{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}
-
Configuració de l'alineació del text. Valors possibles: start, end, left, right o center. El valor predeterminat és start.
-
{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}
-
Configuració d'alineació de la línia de base. Valors possibles: top, hanging, middle, alphabetic, ideographic, bottom. El valor predeterminat és alphabetic.
-
{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}
-
Direccionalitat. Valors possibles: ltr, rtl, inherit. El valor predeterminat és inherit.
-
- -

Aquestes propietats poden ser familiars, si heu treballat abans amb CSS.

- -

El següent diagrama del WHATWG mostra les diverses línies de base compatibles amb la propietat textBaseline.La part superior del quadrat em està aproximadament en la part superior dels glifos en una font, la línia de base penjant és on alguns glifos com आ estan ancorats, el mitjà està a mig camí entre la part superior del quadrat em i la part inferior del quadrat em,la línia de base alfabètica és on ancoren caràcters com Á, ÿ, -f i Ω, la línia de base ideográfica és on glifos com 私 i 達 estan ancorats, i la part inferior del quadrat em està aproximadament en la part inferior dels glifos en una font. La part superior i inferior del quadre delimitador pot estar lluny d'aquestes línies de base, a causa que els glifos s'estenen molt més allà del quadrat em.

- -

Un exemple de textBaseline

- -

Editeu el codi següent i vegeu els canvis actualitzats en directe en el llenç:

- -
ctx.font = '48px serif';
-ctx.textBaseline = 'hanging';
-ctx.strokeText('Hello world', 0, 100);
-
- - - -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

- -

Mesures avançades de text

- -

En el cas de necessitar obtenir més detalls sobre el text, el següent mètode permet mesurar-ho.

- -
-
{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}
-
Retorna un objecte {{domxref("TextMetrics")}} que conté l'amplada, en píxels, que serà el text especificat quan es dibuixi en l'estil de text actual.
-
- -

El següent fragment de codi mostra com es pot mesurar un text i obtenir la seva amplada

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var text = ctx.measureText('foo'); // TextMetrics object
-  text.width; // 16;
-}
-
- -

Notes específiques de Gecko

- -

En Gecko (el motor de representació de Firefox, Firefox OS i altres aplicacions basades en Mozilla), es van implementar algunes APIs prefixades en versions anteriors per dibuixar text en un llenç. Ara estan desaprovades i eliminades, ja no es garanteix el seu funcionament.

- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}

- -
- - -
 
- -
 
-
-- cgit v1.2.3-54-g00ecf