JavaScript ile canvas üzerinden dikdörtgen çizme
Kareler ve dikdörtgenler mutlaka moveTo,
lineTo kombinasyonları ile çizilmek zorunda değildir
- bunun için daha basit yöntemler de vardır.
Hadi onları inceleyelim.
strokeRect Metodu
strokeRect(x, y, genişlik,
yükseklik) metodu, belirtilen noktada bir dikdörtgenin
anahatını çizer. İlk iki parametre, çizilen dikdörtgenin
sol üst köşesinin konum alacağı noktanın koordinatlarını
belirtir.
Hadi strokeRect kullanarak bir dikdörtgen çizelim
(ctx'nin zaten var olduğunu varsayıyoruz):
<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);
:
fillRect Metodu
fillRect(x, y, genişlik, yükseklik)
metodu, strokeRect ile aynı şekilde çalışır,
sadece dolu bir dikdörtgen çizer.
Bir örnekle görelim:
<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);
:
rect Metodu
Bir sonraki metod olan rect(x, y, genişlik,
yükseklik) da bir dikdörtgen çizer. Ancak
bu dikdörtgen sadece stroke veya fill
metodu uygulandığında görünür hale gelir.
İlk durumda anahat, ikinci durumda ise
dolu şekil olacaktır.
Hadi rect kullanarak bir anahat çizelim:
<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();
:
Şimdi de dolu bir şekil çizelim:
<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();
:
clearRect Metodu
Bir sonraki metod olan clearRect(x, y,
genişlik, yükseklik) bir silgi gibi çalışır,
dikdörtgen bir alanı temizleyerek içeriği
tamamen şeffaf hale getirir.
Hadi fillRect kullanarak bir kare çizelim
ve clearRect kullanarak bir kısmını silelim:
<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);
:
