HTML-canvas textAlign Property
Voorbeeld
Maak een rode lijn in positie 150. Positie 150 is het ankerpunt voor alle tekst die in het onderstaande voorbeeld is gedefinieerd. Bestudeer het effect van elke eigenschapswaarde van textAlign:
javascript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create a red line in position 150
ctx.strokeStyle = "red";
ctx.moveTo(150, 20);
ctx.lineTo(150, 170);
ctx.stroke();
ctx.font = "15px Arial";
// Show the different textAlign values
ctx.textAlign = "start";
ctx.fillText("textAlign=start", 150, 60);
ctx.textAlign = "end";
ctx.fillText("textAlign=end", 150, 80);
ctx.textAlign = "left";
ctx.fillText("textAlign=left", 150, 100);
ctx.textAlign = "center";
ctx.fillText("textAlign=center", 150, 120);
ctx.textAlign = "right";
ctx.fillText("textAlign=right", 150, 140);
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
| Property | |||||
|---|---|---|---|---|---|
| textAlign | Yes | 9.0 | Yes | Yes | Yes |
Definitie en gebruik
Met de eigenschap textAlign wordt de huidige uitlijning voor tekstinhoud ingesteld of geretourneerd, volgens het ankerpunt.
Normaal gesproken begint de tekst op de opgegeven positie, maar als u textAlign ="right" instelt en de tekst op positie 150 plaatst, betekent dit dat de tekst op positie 150 moet EINDEN .
Tip: Gebruik de methode fillText() of strokeText() om de tekst daadwerkelijk op het canvas te tekenen en te positioneren.
| Standaardwaarde: | begin |
|---|---|
| JavaScript-syntaxis: | context .textAlign="center|end|left|right|start"; |
Eigendomswaarden
| Values | Description | Play it |
|---|---|---|
| start | Default. The text starts at the specified position | |
| end | The text ends at the specified position | |
| center | The center of the text is placed at the specified position | |
| left | The text starts at the specified position | |
| right | The text ends at the specified position |
❮ HTML Canvas-referentie