Uchora mistari kupitia canvas kwenye JavaScript
Wacha tuanze kwa kuchora mistari. Ili kuelewa jinsi hii inafanyika, fikiria kuwa una karatasi na kalamu. Unaweza kuchora kwenye karatasi hiyo, au bila kuchora unaweza tu kusogeza kalamu hadi mahali unapotaka.
JavaScript inafanya kazi vivyo hivyo: ina
kalamu (au kalamu ya kuchorea), unaweza
kuipeleka mahali unapotaka kwa kutumia
kitendo moveTo, na kuchora - kwa kutumia
kitendo lineTo.
Njia zote mbili huchukua pointi kama vigezo,
ambapo kalamu inapaswa kusogezwa - kigezo cha kwanza
ni uratibu usio na usawa, na cha pili -
usio na wima. Mwanzo wa kuratibu - pointi 0,
0 - hii ni kona ya juu kushoto ya kipengele.
Wakati kalamu inasogezwa kwenye pointi inayohitajika -
kitendo moveTo husogeza tu, na
lineTo katika mchakato wa kusogeza huchora
mstari kutoka kwenye nafasi ya sasa ya kalamu hadi kwenye pointi,
ambayo itasogea.
Hata hivyo, ikiwa utaendesha msimbo ulio hapo juu
- hakuna kitakachotokea: ni muhimu kuandika
amri mbili zaidi: amri ya kwanza beginPath
inapaswa kubainishwa kabla ya kuanza kuchora
mstari, na amri ya pili stroke inapaswa
kuitwa baada ya mchanganyiko wote wa moveTo
na lineTo ili mstari uchorwe.
Kwa hivyo, wacha tuandike msimbo unaofanya kazi wa kuchora mstari:
Wacha tuchore mstari
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
:
Wacha tuchore ndege
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();
:
Wacha tuchore pembe tatu
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 50);
ctx.stroke();
:
Wacha tuchore mraba
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
:
Kufunga maumbo
Ili kuchora umbo lililofungwa sio lazima
ufanye mistari yote - mstari wa mwisho unaweza
kuchorwa kiotomatiki na kufunga umbo.
Ili kufanya hivyo kabla ya kitendo stroke inapaswa
kuitwa kitendo closePath.
Kitendo huji jaribu kufunga umbo, kwa kuchora mstari ulionyooka kutoka kwenye pointi ya mwisho hadi kwenye mwanzo. Ikiwa umbo limekwisha fungwa au ni pointi tu, basi kitendo hakifanyi chochote.
Wacha tuchore pembe tatu, tukitumia closePath:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - tuniacha hatua hii
ctx.closePath();
ctx.stroke();
:
Kukatia rangi maumbo
Badala ya kitendo stroke unaweza kutumia
kitendo fill - katika kesi hii umbo sio lazima
liwe limefungwa kabisa - litakatiwa rangi
hata hivyo:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - tuniacha hatua hii
//ctx.closePath(); - na hii pia
ctx.fill();
:
