ძირითადი გამოყენება

ამ სტატიაში მიმოვიხილავთ კანვასის ელემენტს. სტატიის ბოლოს შეძლებთ დახატოთ პირველი მაგალითი თქვენს ბრაუზერში.

<canvas> ელემენტი

<canvas id="tutorial" width="250" height="250"></canvas>

ერთი შეხედვით <canvas> ელემენტი წააგავს <img> ელემენეტს, მაგრამ გააჩნია განსხვავებები, მაგალითად: კანვასის ელემენტს არ გააჩნია src ან alt ატრიბუტი, მაგრამ ორივეს გააჩნია width და height. თუ ელემენტის ზომები არ არის მითითებული მაშინ ბრაუზერი მას ნაგულისხმევად ანიჭებს width 300 პიქსელს და height 150 პიქსელს. რეალურად ელემენტის ზომების შეცვლა CSS-თაც შეიძლება უფრო მარტივად და არ არის სავალდებულო მისი ატრიბუტით გასტილვა.

კონტექსტი და დარენდერება

<canvas> ელემენტი ქმნის ფიქსირებული ზომის სახატავ ზედაპირს, რომელიც არენდერებს ერთს ან რამდენიმე კონტენტის. ამ კანვასის სტატიებში განვიხილავთ 2D კონტენტის დარენდერებას თუმცა ეს იმას არ ნიშნავს, რომ 3D დარენდერება არ არის შესაძლებელი ვებში. თუ გვსურს 3D კონტენტის დარენდერება მაშინ WebGL-ის გამოყენება დაგჭირდებათ. ასევე არსებობს WebGL-ზე დაშენებული უფრო მარტივი 3D გრაფიკების ბიბლიოთეკა ThreeJS.

კანვასი თავდაპირველად ცარიელია. თუ გვსურს რაიმეს ვიზუალზე გამოტანა მაშინ საჭიროა პირველ რიგში ამოვიღოთ კანვასის ელემენტი და შემდგომ მისი დარენდერების კონტექსტი. <canvas> ელემენტს გააჩნია მეთოდი სახელად getContext, ამ მეთოდის საშუალებით შესაძლებელია ამოვიღოთ ელემენტის დარენდერების კონტექსტი. მეთოდი ერთ პარამეტრს ღებულობს, სადაც ვუთითებთ კონტექსტის ტიპს. მაგალითად, 2D გრაფიკისთვის შეგვიძლია გადავცეთ პარამეტრი "2d".

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

მაგალითის პირველი ხაზი პასუხისმგებელია კანვასის ელემენტის ამოღებაზე ხოლო მეორე ხაზით ვიღებთ მისი ხატვის კონტექსტს.

მხარდაჭერის შემოწმება

როგორც წინა სტატიაში იყო ნახსენები, ყველა ბრაუზერს არ გააჩნია კანვასის მხარდაჭერა. შეგვიძლია მარტივად შევამოწმოთ, ბრაუზერს გააჩნია თუ არა კანვასის მხარდაჭერა.

const canvas = document.querySelector('canvas');

if (canvas.getContext) {
  console.log('კანვასის მხარდაჭერა გააჩნია');
} else {
  console.log('კანვასის მხარდაჭერა არ გააჩნია');
}

მარტივი მაგალითი

მარტივი მაგალითისთვის დავხატოთ ორი კვადრატი, რომელიც ერთმანეთზე გადადის, შემდგომ სტატიებში უფრო დეტალურად იქნება თითოეული თვისება განხიული.

<canvas id="twoRect" width="150" height="150"></canvas>

const canvas = document.querySelector('#twoRect');

if (canvas.getContext) {
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'rgb(70 130 180)';
  ctx.fillRect(10, 10, 50, 50);
  ctx.fillStyle = 'rgb(0 200 0 / 50%)';
  ctx.fillRect(30, 30, 50, 50);
} else {
  console.log('ბრაუზერს არ აქვს კანვასის მხარდაჭერა');
}