JavaScript арқылы canvas деректеріне тіктөртбұрыштар салу
Шаршылар мен тіктөртбұрыштарды міндетті түрде
moveTo, lineTo комбинацияларымен
салудың қажеті жоқ - бұл үшін әлдеқайда қарапайым
әдістер бар. Олармен танысайық.
strokeRect әдісі
strokeRect(x, y, ені,
биіктігі) әдісі берілген нүктеде тіктөртбұрыштың
сызбасын салады. Алғашқы екі параметр салынатын
тіктөртбұрыштың жоғарғы сол жақ бұрышы болатын
нүктенің координаттарын көрсетеді.
strokeRect әдісі арқылы тіктөртбұрыш салайық
(ctx бұрыннан бар деп есептейміз):
<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);
:
fillRect әдісі
fillRect(x, y, ені, биіктігі)
әдісі strokeRect сияқты жұмыс істейді,
тек боялған тіктөртбұрышты салады.
Мысалмен көрейік:
<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);
:
rect әдісі
Келесі rect(x, y, ені,
биіктіği) әдісі де тіктөртбұрыш салады. Бірақ
бұл тіктөртбұрыш тек stroke немесе fill
әдістерін қолданған кезде ғана көрінеді.
Бірінші жағдайда сызба, ал екінші жағдайда
фигура болады.
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();
:
Ал енді фигура салайық:
<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();
:
clearRect әдісі
Келесі clearRect(x, y,
ені, биіктігі) әдісі өшіргіш сияқты жұмыс істейді,
тіктөртбұрышты аймақты тазартып, мазмұнын
мүлдем мөлдір етеді.
fillRect әдісі арқылы кішкене шаршы салып,
содан кейін оның бір бөлігін 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);
:
