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

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

Результат:

Kaedah fillRect

Kaedah fillRect(x, y, lebar, tinggi) berfungsi sama seperti strokeRect, hanya ia melukis segi empat tepat yang diisi warna. Mari lihat contoh:

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

Результат:

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:

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

Результат:

Sekarang mari lukis bentuk yang diisi:

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

Результат:

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:

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

Результат: