ხაზების ხატვა 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();
:
