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):
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.stroke();
:
És most rajzoljunk kitöltött alakzatot:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);
:
