Գծեր նկարելը canvas-ի միջոցով JavaScript-ում
Սկսենք պարզից՝ գծեր նկարելով: Որպեսզի հասկանաք, թե ինչպես է դա արվում, պատկերացրեք, որ ձեր առջևում կա թուղթ և մատիտ: Դուք կարող եք նկարել այդ թղթի վրա, կամ կարող եք չնկարել, ուղղակի տեղափոխել մատիտը ցանկալի կետ:
Նույն կերպ է աշխատում նաև JavaScript-ը՝ այն ունի
մատիտ (կամ գրիչ նկարման համար), որն կարող եք
տեղափոխել ցանկալի տեղ՝ օգտագործելով
moveTo մեթոդը,
իսկ նկարելու համար կարող եք օգտագործել
lineTo մեթոդը:
Երկու մեթոդներն էլ պարամետրերով ընդունում են այն կետը,
որին պետք է տեղափոխել գրիչի ծայրը. առաջին պարամետրը
հորիզոնական կոորդինատն է, իսկ երկրորդը՝
ուղղահայաց կոորդինատը: Կոորդինատների սկզբնակետը՝ 0,
0 կետը, տարրի վերին ձախ անկյունն է:
Երբ գրիչը տեղափոխվում է ցանկալի կետ,
moveTo մեթոդը ուղղակի տեղափոխում է այն, իսկ
lineTo մեթոդը տեղափոխման ընթացքում նկարում է
գիծ գրիչի ներկա դիրքից մինչև այն կետը,
որին այն տեղափոխվում է:
Սակայն, եթե գործարկեք վերը նշված կոդը,
ոչինչ չի պատահի. անհրաժեշտ է գրել
ևս երկու հրաման. առաջին հրամանը՝ beginPath,
պետք է նշված լինի գիծը նկարելը սկսելուց առաջ,
իսկ երկրորդ հրամանը՝ stroke, պետք է
կանչվի moveTo և lineTo համադրություններից
հետո, որպեսզի գիծը նկարվի:
Այսպիսով, եկեք գրենք աշխատանքային կոդ գիծ նկարելու համար.
Եկեք նկարենք մի գիծ
<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();
:
Եկեք նկարենք թռչուն
<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();
:
Եկեք նկարենք եռանկյուն
<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();
:
Եկեք նկարենք քառակուսի
<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();
:
Ֆիգուրների փակում
Փակ ֆիգուր նկարելու համար պարտադիր չէ
անել բոլոր գծերը. վերջին գիծը կարող է
նկարվել ավտոմատ կերպով և փակել ֆիգուրը:
Դրա համար stroke մեթոդից առաջ
պետք է կանչել closePath մեթոդը:
Այս մեթոդը փորձում է փակել ֆիգուրը՝ նկարելով ուղիղ գիծ վերջնակետից դեպի սկզբնակետ: Եթե ֆիգուրն արդեն փակ էր կամ ուղղակի կետ է, ապա մեթոդը ոչինչ չի անում:
Եկեք նկարենք եռանկյունի՝ օգտագործելով 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); - այս քայլը բաց ենք թողնում
ctx.closePath();
ctx.stroke();
:
Ֆիգուրների ներկում
stroke մեթոդի փոխարեն կարող եք օգտագործել
fill մեթոդը. այս դեպքում ֆիգուրը պարտադիր չէ, որ
լինի ամբողջությամբ փակ. այն կներկվի նաև այդպես.
<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.closePath(); - և այս մեկը նույնպես
ctx.fill();
:
