Téglalapok rajzolása canvas segítségével JavaScriptben

A négyzeteket és téglalapokat nem feltétlenül kell moveTo és lineTo kombinációival rajzolni - ehhez vannak egyszerűbb metódusok is. Nézzük meg ezeket.

A strokeRect metódus

A strokeRect(x, y, szélesség, magasság) metódus egy téglalap keretét rajzolja le a megadott pontban. Az első két paraméter annak a pontnak a koordinátáit adja meg, ahol a megrajzolt téglalap bal felső sarka lesz.

Rajzoljunk egy téglalapot a strokeRect segítségével (feltételezzük, hogy ctx már létezik):

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.strokeRect(50, 50, 100, 75);

Результат:

A fillRect metódus

A fillRect(x, y, szélesség, magasság) metódus ugyanúgy működik, mint a strokeRect, csak kitöltött téglalapot rajzol. Nézzünk egy példát:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.fillRect(50, 50, 100, 75);

Результат:

A rect metódus

A következő metódus a rect(x, y, szélesség, magasság) szintén téglalapot rajzol. De ez a téglalap csak akkor válik láthatóvá, ha alkalmazzuk a stroke vagy fill metódust. Az első esetben keretet, a másodikban kitöltött alakzatot kapunk.

Rajzoljunk keretet a rect segítségével:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 75);
ctx.stroke();

Результат:

És most rajzoljunk kitöltött alakzatot:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 75);
ctx.fill();

Результат:

A clearRect metódus

A következő metódus a clearRect(x, y, szélesség, magasság) úgy működik, mint egy radír, kitöröl egy téglalap alakú területet, és a tartalmat teljesen átlátszóvá teszi.

Rajzoljunk egy négyzetet a fillRect segítségével, és töröljük ki egy részét a clearRect-tel:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);

Результат: