Canvas fillText() -menetelmä

Canvas-ohjekirja

Määritelmä ja käyttö

fillText() Metodi piirtää värillistä tekstiä taustakuvaan. Tekstin oletusväri on musta.

Vinkki:Käytä font Atribuutti määrittää kirjasinkoon ja -tyypin, ja käytetään fillStyle Atribuutit piirtävät tekstin toisella värisellä tai gradientilla.

Esimerkki

Käytä fillText()-metodia kirjoittaaksesi tekstejä "Hello world!" ja "codew3c.com" taustakuvaan:

Selaimesi ei tue HTML5 canvas-tagiä.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);
ctx.font="30px Verdana";
// Luo gradientti
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Käytä väriä gradienttia
ctx.fillStyle=gradient;
ctx.fillText("codew3c.com",10,90);

Kokeile itse

Syntaksi

context.fillText(text,x,y,maxWidth);

Parametriaika

Parametri Kuvaus
text Määritellään taustakuvaan tulostettava teksti.
x Tekstin piirtämisen alkukohdan x-koordinaatti (suhteessa taustakuvaan).
y Tekstin piirtämisen alkukohdan y-koordinaatti (suhteessa taustakuvaan).
maxWidth Valinnainen. Sallittu enimmäistekstileveys pikseleissä.

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ä.

Canvas-ohjekirja