JavaScript арқылы canvas деректеріне тіктөртбұрыштар салу

Шаршылар мен тіктөртбұрыштарды міндетті түрде moveTo, lineTo комбинацияларымен салудың қажеті жоқ - бұл үшін әлдеқайда қарапайым әдістер бар. Олармен танысайық.

strokeRect әдісі

strokeRect(x, y, ені, биіктігі) әдісі берілген нүктеде тіктөртбұрыштың сызбасын салады. Алғашқы екі параметр салынатын тіктөртбұрыштың жоғарғы сол жақ бұрышы болатын нүктенің координаттарын көрсетеді.

strokeRect әдісі арқылы тіктөртбұрыш салайық (ctx бұрыннан бар деп есептейміз):

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 әдісі

fillRect(x, y, ені, биіктігі) әдісі strokeRect сияқты жұмыс істейді, тек боялған тіктөртбұрышты салады. Мысалмен көрейік:

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 әдісі

Келесі rect(x, y, ені, биіктіği) әдісі де тіктөртбұрыш салады. Бірақ бұл тіктөртбұрыш тек stroke немесе fill әдістерін қолданған кезде ғана көрінеді. Бірінші жағдайда сызба, ал екінші жағдайда фигура болады.

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

Результат:

Ал енді фигура салайық:

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 әдісі

Келесі clearRect(x, y, ені, биіктігі) әдісі өшіргіш сияқты жұмыс істейді, тіктөртбұрышты аймақты тазартып, мазмұнын мүлдем мөлдір етеді.

fillRect әдісі арқылы кішкене шаршы салып, содан кейін оның бір бөлігін 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);

Результат: