Ultimele tutoriale de dezvoltare web
 

HTML canvas rect() Method

<Canvas obiect

Exemplu

Desenați un dreptunghi de 150 * 100 pixeli:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
Încearcă - l singur »

Suport pentru browser-

Numerele din tabel specifica prima versiune de browser care acceptă pe deplin metoda.

Metodă
rect() 4 9 3.6 4 10.1

Definiție și utilizare

rect() metoda creează un dreptunghi.

Tip: Folosiți stroke() sau fill() metoda pentru a desena dreptunghiul pe pânză.

sintaxa JavaScript: context . rect( x,y,width,height ) ;

Valorile parametrilor

Parametru Descriere Joaca-l
x X coordonata colțul din stânga sus al dreptunghiului Joaca - l »
y Y coordonata colțul din stânga sus al dreptunghiului Joaca - l »
width Lățimea dreptunghiului, în pixeli Joaca - l »
height Înălțimea dreptunghiului, în pixeli Joaca - l »

Exemple

Mai multe exemple

Exemplu

Creați trei dreptunghiuri cu rect() metoda:

Yourbrowserdoesnotsupportthecanvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Red rectangle
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);
ctx.stroke();

// Green rectangle
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();

// Blue rectangle
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();
Încearcă - l singur »


<Canvas obiect