Melukis Segi Empat melalui Canvas pada JavaScript
Segi empat sama dan segi empat tepat tidak semestinya
dilukis menggunakan gabungan moveTo,
lineTo - terdapat kaedah yang lebih mudah untuk ini.
Mari kita terokainya.
Kaedah strokeRect
Kaedah strokeRect(x, y, lebar,
tinggi) melukis kontur segi empat tepat
pada titik yang ditentukan. Dua parameter pertama menentukan
koordinat titik di mana penjuru kiri atas
segi empat tepat yang dilukis akan berada.
Mari lukis segi empat tepat menggunakan
strokeRect (anggap ctx
sudah wujud):
<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);
:
Kaedah fillRect
Kaedah fillRect(x, y, lebar, tinggi)
berfungsi sama seperti strokeRect,
hanya ia melukis segi empat tepat yang diisi warna.
Mari lihat contoh:
<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);
:
Kaedah rect
Kaedah seterusnya rect(x, y, lebar,
tinggi) juga melukis segi empat tepat. Tetapi
segi empat tepat ini hanya akan kelihatan
jika kaedah stroke atau fill
digunakan. Dalam kes pertama, kontur akan dihasilkan, dan dalam kes kedua
- bentuk yang diisi.
Mari lukis kontur 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();
:
Sekarang mari lukis bentuk yang diisi:
<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();
:
Kaedah clearRect
Kaedah seterusnya clearRect(x, y,
lebar, tinggi) berfungsi seperti pemadam,
menghapuskan kawasan segi empat tepat dan menjadikan
kandungannya benar-benar lutsinar.
Mari lukis sebuah segi empat sama menggunakan fillRect
dan padam sebahagian daripadanya 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);
:
