მართკუთხედების ხატვა canvas-ის მეშვეობით JavaScript-ში
კვადრატები და მართკუთხედები არ არის აუცილებელი
ხატო moveTo-ისა და
lineTo-ის კომბინაციების გამოყენებით - ამისთვის არსებობს უფრო მარტივი მეთოდებიც.
მოდით განვიხილოთ ისინი.
strokeRect მეთოდი
strokeRect მეთოდი (x, y, სიგანე,
სიმაღლე) ხაზავს მართკუთხედის კონტურს მითითებულ წერტილში. პირველი ორი პარამეტრი განსაზღვრავს
იმ წერტილის კოორდინატებს, სადაც ნახატული მართკუთხედის ზედა მარცხენა კუთხე მოექცევა.
მოდით დავხატოთ მართკუთხედი strokeRect-ის გამოყენებით
(ჩავთვალოთ, რომ ctx
უკვე არსებობს):
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.strokeRect(50, 50, 100, 75);
:
fillRect მეთოდი
fillRect მეთოდი (x, y, სიგანე, სიმაღლე)
მუშაობს ისევე, როგორც strokeRect,
მხოლოდ ხაზავს გაფერადებულ მართკუთხედს.
შევხედოთ მაგალითს:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 75);
:
rect მეთოდი
შემდეგი მეთოდი rect(x, y, სიგანე,
სიმაღლე) ასევე ხაზავს მართკუთხედს. მაგრამ
ეს მართკუთხედი გახდება ხილული მხოლოდ მაშინ,
თუ გამოვიყენებთ stroke ან fill მეთოდს.
პირველ შემთხვევაში იქნება კონტური, ხოლო მეორეში
- გაფერადებული ფიგურა.
მოდით დავხატოთ კონტური rect-ის გამოყენებით:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.stroke();
:
ახლა კი დავხატოთ გაფერადებული ფიგურა:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.fill();
:
clearRect მეთოდი
შემდეგი მეთოდი clearRect(x, y,
სიგანე, სიმაღლე) მუშაობს როგორც საშლელი,
გაასუფთავებს მართკუთხა ტერიტორიას და ხდის
შიგთავსს სრულიად გამჭვირვალეს.
მოდით დავხატოთ კვადრატი fillRect-ის გამოყენებით
და გავწმინდოთ მისი ნაწილი clearRect-ის დახმარებით:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);
:
