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):
<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);
:
Njia ya fillRect
Njia fillRect(x, y, upana, urefu)
inafanya kazi kama strokeRect,
lakini inachora mstatili uliojaa rangi.
Tuangalie kwa mfano:
<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);
:
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:
<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();
:
Sasa wacha tuchore umbo lenye rangi:
<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();
:
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:
<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);
:
