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