Canvas fillRect() -menetelmä

Määrittely ja käyttö

fillRect() Metodi piirtää "täytetyn" suorakulmion. Oletusarvoinen täyttöväri on musta.

Vinkki:Käytä fillStyle Ominaisuudet asettamaan täytettävän piirustuksen väri, gradientti tai kuviokuva.

esimerkki

Riisuta 150*100 kuvapisteen kokoista täytettyä suorakulmiota:

Selaimesi ei tue HTML5 canvas-elementtiä.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(20,20,150,100);

Kokeile itse

syntaksi

context.fillRect(x,y,width,korkeus);

parametrin arvo

parametri kuvaus
x Suorakulmion ylävasemman x-akselin koordinaatti.
y Suorakulmion ylävasemman y-akselin koordinaatti.
width Suorakulmion leveys, kuvapisteinä mitattuna.
korkeus Suorakulmion korkeus, kuvattuna pikseleinä.

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen täysin tukevan siihen ominaisuuden 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ä.