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

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();

Результат:

Wacha tuchore ndege

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

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

Результат:

Kazi za vitendo