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, туурасы,
бийиктиги) методу дагы тик бурчтукту чийет. Бирок
бул тик бурчтук 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);
:
