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):

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);

Результат:

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:

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);

Результат:

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:

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();

Результат:

Şimdi de dolu bir şekil çizelim:

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();

Результат:

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:

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);

Результат: