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):
<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);
:
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:
<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);
:
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:
<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();
:
Dan sekarang mari gambar bentuk yang terisi:
<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();
:
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:
<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);
:
