Uchoreaji wa Mstatili Kupitia Canvas kwenye JavaScript

Mraba na mistatili si lazima ichorwe kwa kutumia mchanganyiko wa moveTo, lineTo - kwa hili kuna njia rahisi zaidi. Tuyaachimbue.

Njia ya strokeRect

Njia strokeRect(x, y, upana, urefu) inachora mstatili wenye mzunguko katika sehemu uliyobainisha. Vigezo viwili vya kwanza vinabainisha viwianishi vya sehemu, ambayo itakuwa kona ya juu kushoto ya mstatili uliochorwa.

Wacha tuchore mstatili kwa kutumia strokeRect (tukichukulia ctx tayari ipo):

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

Результат:

Njia ya fillRect

Njia fillRect(x, y, upana, urefu) inafanya kazi kama strokeRect, lakini inachora mstatili uliojaa rangi. Tuangalie kwa mfano:

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

Результат:

Njia ya rect

Njia inayofuata rect(x, y, upana, urefu) pia inachora mstatili. Lakini mstatili huu utaonekana, tu kama utatumia njia stroke au fill. Katika kesi ya kwanza utapata mzunguko, na ya pili - umbo lenye rangi.

Wacha tuchore mzunguko kwa kutumia 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();

Результат:

Sasa wacha tuchore umbo lenye rangi:

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

Результат:

Njia ya clearRect

Njia inayofuata clearRect(x, y, upana, urefu) inafanya kazi kama kifutio, kinafuta eneo la mstatili na kuifanya yaliyomo iwe uwazi kabisa.

Wacha tuchore mraba mdogo kwa kutumia fillRect na kufuta sehemu yake kwa kutumia 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);

Результат: