Canvas textAlign ominaisuus
Määrittely ja käyttö
textAlign Ominaisuus määrittää tai palauttaa tekstin nykyisen tyylin.
Yleensä teksti alkaa määritetystä sijainnista, mutta jos asetat textAlign="right" ja sijoitat tekstin sijainnissa 150, teksti päättyy sijainnissa 150.
vinkki:käyttäen fillText() tai strokeText() menetelmä piirtää todella tekstiä ja sijoittaa sen maalausalueelle.
esimerkki
Luo punainen viiva sijainnissa 150. Sijainti 150 on kaikkien alla olevien esimerkkien tekstin ankkuri. Tutki eri textAlign-arvojen vaikutuksia:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Luo sininen viiva sijainnissa 150
ctx.strokeStyle="blue";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// Näytä eri textAlign-arvot
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);
syntaksi
konteksti.textAlign="center|end|left|right|start";
ominaisuuden arvo
| arvo | kuvaus |
|---|---|
| aloita | oletus. Teksti alkaa määritetystä sijainnista. |
| loppu | teksti päättyy määritettyyn sijaintiin. |
| keskitetty | tekstin keskipiste asetetaan määritettyyn sijaintiin. |
| vasen | teksti vasemmalle tasalle. |
| oikea | teksti oikealle tasalle. |
tekniset yksityiskohdat
| oletusarvo: | aloita |
|---|
Selaimen tuki
Taulukossa olevat numerot osoittavat ensimmäisen täysin tukevan selaimen version.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Huomautus:Internet Explorer 8 ja aikaisemmat versiot eivät tue <canvas>-elementtiä.
