This translation is incomplete. Please help translate this article from English.

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:

fillText(text, x, y [, maxWidth])
Omple un text donat en la posició donada (x, y). Opcionalment amb ample màxim per dibuixar.
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);
}

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

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ç:

font = value
L'estil de text actual que s'utilitza en dibuixar text. Aquesta cadena utilitza la mateixa sintaxi que la propietat CSS font. La font predeterminada és 10px sans-serif.
textAlign = value
Configuració de l'alineació del text. Valors possibles: start, end, left, right o center. El valor predeterminat és start.
textBaseline = value
Configuració d'alineació de la línia de base. Valors possibles: top, hanging, middle, alphabetic, ideographic, bottom. El valor predeterminat és alphabetic.
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);

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.

measureText()
Retorna un objecte 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.

 
 

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,