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, эни, баландлиги) усули ҳам тўртбурчак чизади. Лекин бу тўртбурчак фақат 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);

Результат: