მართკუთხედების ხატვა canvas-ის მეშვეობით JavaScript-ში

კვადრატები და მართკუთხედები არ არის აუცილებელი ხატო moveTo-ისა და lineTo-ის კომბინაციების გამოყენებით - ამისთვის არსებობს უფრო მარტივი მეთოდებიც. მოდით განვიხილოთ ისინი.

strokeRect მეთოდი

strokeRect მეთოდი (x, y, სიგანე, სიმაღლე) ხაზავს მართკუთხედის კონტურს მითითებულ წერტილში. პირველი ორი პარამეტრი განსაზღვრავს იმ წერტილის კოორდინატებს, სადაც ნახატული მართკუთხედის ზედა მარცხენა კუთხე მოექცევა.

მოდით დავხატოთ მართკუთხედი strokeRect-ის გამოყენებით (ჩავთვალოთ, რომ ctx უკვე არსებობს):

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

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

ctx.strokeRect(50, 50, 100, 75);

Результат:

fillRect მეთოდი

fillRect მეთოდი (x, y, სიგანე, სიმაღლე) მუშაობს ისევე, როგორც strokeRect, მხოლოდ ხაზავს გაფერადებულ მართკუთხედს. შევხედოთ მაგალითს:

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

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

ctx.fillRect(50, 50, 100, 75);

Результат:

rect მეთოდი

შემდეგი მეთოდი rect(x, y, სიგანე, სიმაღლე) ასევე ხაზავს მართკუთხედს. მაგრამ ეს მართკუთხედი გახდება ხილული მხოლოდ მაშინ, თუ გამოვიყენებთ stroke ან fill მეთოდს. პირველ შემთხვევაში იქნება კონტური, ხოლო მეორეში - გაფერადებული ფიგურა.

მოდით დავხატოთ კონტური rect-ის გამოყენებით:

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

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

ctx.rect(50, 50, 100, 75);
ctx.stroke();

Результат:

ახლა კი დავხატოთ გაფერადებული ფიგურა:

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

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

ctx.rect(50, 50, 100, 75);
ctx.fill();

Результат:

clearRect მეთოდი

შემდეგი მეთოდი clearRect(x, y, სიგანე, სიმაღლე) მუშაობს როგორც საშლელი, გაასუფთავებს მართკუთხა ტერიტორიას და ხდის შიგთავსს სრულიად გამჭვირვალეს.

მოდით დავხატოთ კვადრატი fillRect-ის გამოყენებით და გავწმინდოთ მისი ნაწილი clearRect-ის დახმარებით:

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

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

ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);

Результат: