Menggambar Persegi Panjang melalui canvas di JavaScript

Persegi dan persegi panjang tidak harus digambar dengan menggunakan kombinasi moveTo, lineTo - ada metode yang lebih sederhana untuk ini. Mari kita bahas metode-metode tersebut.

Metode strokeRect

Metode strokeRect(x, y, lebar, tinggi) menggambar kerangka (outline) persegi panjang pada titik yang ditentukan. Dua parameter pertama menentukan koordinat titik, di mana sudut kiri atas persegi panjang yang digambar akan berada.

Mari gambar sebuah persegi panjang menggunakan strokeRect (anggap bahwa ctx sudah ada):

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

Результат:

Metode fillRect

Metode fillRect(x, y, lebar, tinggi) bekerja dengan cara yang sama seperti strokeRect, hanya saja menggambar persegi panjang yang terisi (diwarnai). Mari lihat contohnya:

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

Результат:

Metode rect

Metode berikutnya rect(x, y, lebar, tinggi) juga menggambar persegi panjang. Namun persegi panjang ini akan menjadi terlihat hanya jika metode stroke atau fill diterapkan. Pada kasus pertama akan menjadi kerangka, dan pada kasus kedua - menjadi bentuk yang terisi.

Mari gambar sebuah kerangka menggunakan rect:

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

Результат:

Dan sekarang mari gambar bentuk yang terisi:

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

Результат:

Metode clearRect

Metode berikutnya clearRect(x, y, lebar, tinggi) bekerja seperti penghapus, menghapus area persegi panjang dan membuat isi di dalamnya menjadi benar-benar transparan.

Mari gambar sebuah persegi kecil menggunakan fillRect dan hapus sebagiannya menggunakan clearRect:

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

Результат: