Rectangulohoro az rӯи canvas dar JavaScript кашидан

Квадрат ва rectangulohoro ҳатман бо истифода аз комбинатсияҳои moveTo, lineTo кашидан лозим нест - барои ин методҳои содатар мавҷуданд. Биёед онҳоро таҳлил кунем.

Усули strokeRect

Усули strokeRect(x, y, барашӣ, баландӣ) дар нуқтаи додашуда контури rectanguloro мекашад. Ду параметри якум координатҳои нуқтаеро муайян мекунанд, ки гӯшаи болоии чапи rectangulori кашидашуда дар он ҷойгир мешавад.

Биёед бо истифода аз strokeRect rectanguloro кашем (фарз мекунем, ки 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, танҳо rectangulori рангирӣшударо мекашад. Биёед бо мисол дида бароем:

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, барашӣ, баландӣ) низ rectanguloro мекашад. Аммо ин rectangulor фақат он гоҳ намоён мешавад, ки усули 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, барашӣ, баландӣ) монанди хокашӯ кор мекунад, минтақаи rectangulshaklро пок карда, муҳтавиро комилан ба заҳирӣ мегардонад.

Биёед бо истифода аз 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);

Результат: