შეჯამება
შესავალი
კანვასის სტატიებში ვისწავლეთ თუ როგორ შეგვიძლია მარტივი 2D ანიმაციების შესრულება კანვასის გამოყენებით. გავიარეთ თუ როგორ შეიძლება სხვადასხვა ფიგურების ხატვა, სხვადასხვა სტილიზაციების მინიჭება და მათი განთავსება კანვასზე. კანვასს გააჩნია უსაზღვრო შესაძლებლობები - ერთადერთი საზღვარი თქვენი წარმოსახვა არის!
კანვასის გამოყენებას როცა ვიწყებთ, აუცილებელია მივანიჭოთ კანვასს ზომის ერთეულები, რადგან ნაგულისხმევად მინიჭებული აქვს width 300 პიქსელი ხოლო height 150 პიქსელი.
HTML-ის შემოტანის შემდეგ, საჭიროა JavaScript-ის მხარეს ელემენტის მოხელთება და მისი კონტექსტის ამოღება getContext('2d')-ით.
თანამედროვე ბრაუზერებს გააჩნიათ getContext-ის მხარდაჭერა, თუმცა არის ძველი მოწყობილობები და ბრაუზერები,
რომლებმაც შესაძლებელია ვერ ამოიღონ კანვასის კონტექსტი და წარმოქმნან შეცდომა,
ამიტომაც პრაქტიკაში კარგია თუ ლოგიკურ ბმაში მოათავსებთ, მოწყობილობას შეუძლია თუ არა გახსნა:
const canvas = document.querySelector('canvas');
if (canvas.getContext) {
console.log('კანვასის მხარდაჭერა გააჩნია');
} else {
console.log('კანვასის მხარდაჭერა არ გააჩნია');
}ასე მიიღებთ მხარდაჭერის შემოწმებას კონკრეტულ მოწყობილობაზე და პოტენციურ შეცდომასაც თავს აარიდებთ.
არ დაგვავიწყდეთ მუდმივი (ჩაციკლული ანიმაცია, როცა სულ ვიძახებთ იგივე კადრს) ანიმაციის შესრულებისას requestAnimationFrame-ის გათიშვა,
თუ აღარ აპირებთ მის გამოყენებას cancelAnimationFrame-ით. მსგავსი გათიშვით მოწყობილობის მეხსიერება გათავისუფლდება.
3D კონტექსტი
სტატიებში მხოლოდ მოყვანილი იყო 2D მაგალითები, რადგან კანვასს არ გააჩნია 3D მხარდაჭერა. 3D კონტექსტისთვის არსებობს განსხვავებული API და ბიბლიოთეკები, როგორიცა WebGL (ჩაშენებული API, როგორც კანვასი), Three.js (ბიბლიოთეკა), Babylon.js (ბიბლიოთეკა), A-Frame (ბიბლიოთეკა) და სხვა ბიბლიოთეკები/ფრეიმვორკები.
WebGL
WebGL (Web Graphics Library) არის JavaScript-ს API, რომელიც არენდერებს მაღალი დონის ინტერაქტიულ 2D და 3D გრაფიკებს სხვადასხვა ბრაუზერში, დამატებითი ხელსაწყოების გარეშე. WebGL ამ ყველაფერს აკეთებს OpenGL ES 2.0-ის გამოყენებით, რომელიც საბოლოოდ შეგვიძლია გამოვიყენოთ HTML კანვასის ელემენტში.
Three.js
Three.js არის JavaScript-ის ბიბლიოთეკა, რომელიც დაშენებულია WebGL-ზე. ბიბლიოთეკა არის open-source, რაც გულისხმობს, რომ ნებისმიერ თქვენთაგანს შეუძლია მის კოდში წვლილის შეტანა. ბიბლიოთეკა არის კარგად ოპტიმიზირებული, მარტივად გამოყენებადი და ასევე cross-browser.
როგორ გავაგრძელოთ
თუ კანვასის ყოველი სტატია წაიკითხეთ და კარგად გაიზარეთ, თქვენ უკვე ფლობთ კანვასის საბაზისოზე მეტ ცოდნას! სურვილისამებრ, შეგიძლიათ დამოუკიდბლად სხვა პროექტები ააწყოთ, რაც დაგეხმარებათ ამ ცოდნის გაღრმავებაში.
საპროექტო იდეები: