ისწავლე

კანვასის ოპტიმიზირება

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

პრე-რენდერი მსგავსი ობიექტებისა და განმეორებადი ობიექტების

ხშირად შესაძლებელია დაგვჭირდეს ვიზუალზე ერთნაირი ელემენტების დარენდერება სხვადასხვა კანვასში, ან იგივე კანვასში გარკვეული დროის შემდგომ. ასეთ დროს შეგვიძლია გამოვიყენოთ offscreenCanvas თვისება, რათა დავარენდეროთ ერთხელ შექმნილი კადრსმიღმა (off-screen) შედეგი მთავარ კანვასში იმდენჯერ, რამდენჯერაც დაგვჭირდება და აღარ მოგვიწევს კოდის გამეორება.

JS
myCanvas.offscreenCanvas = document.createElement('canvas');
myCanvas.offscreenCanvas.width = myCanvas.width;
myCanvas.offscreenCanvas.height = myCanvas.height;

myCanvas.getContext('2d').drawImage(myCanvas.offScreenCanvas, 0, 0);

მთელი რიცხვების გამოყენება

საბ-პიქსელების დარენდერება იწყება მაშინ, როცა დასარენდერებელ ობიექტს კანვასში არ აქვს მთელი რიცხვის მნიშვნელობა.

JS
ctx.drawImage(myImage, 0.3, 0.5);

მსგავსი კოდი კანვასს აიძულებს ზედმეტი მოქმედებების შესრულებას და ამნის anti-aliasing-ის ეფექტს. ამისთვის თავის ასარიდებლად, შეგვიძლია მნიშვნელობა წინასწარ დავამრგვალოთ მათემატიკური მეთოდების გამოყენებით.

გამოიყენეთ CSS დიდი ბექგრაუნდ სურათების დასარენდერებლად

ხშირად გვიწევს კანვასზე რაღაც ბექგრაუნდ სურათის გამოსახვა. როცა იმავე კანვასზე ვანახლებთ ანიმაციას, გვიწევს იგივე ბექგრაუნდის ყოველ ჯერზე თავიდან დარენდერება, რაც არ არის ოპტიმალური. ასეთ დროს ჯობია CSS-ის გამოყენებით გავსტილოთ ბექგრაუნდი.

გათიშეთ გამჭვირვალობის ეფექტი

თუ არ ვაპირებთ კანვასში გამჭვირვალობის ეფექტის გამოყენებას, მაშინ უმჯობესია ის თავიდანვე გავთიშოთ. გასათიშად საჭიროა alpha თვისების false-ზე დაყენება, როცა getContext მეთოდს ვიყენებთ.

JS
const ctx = canvas.getContext('2d', { alpha: false });

ზოგადი რჩევები

  • აარიდეთ თავი კანვასის სტეითის ცვლილებებს, როცა შეგიძლიათ.
  • დაარენდერეთ მხოლოდ სქრინის განსხვავები და არა მთლიანი ახალი სთეითი.
  • თავი აარიდეთ shadowBlur გამოყენებას, როცა შეგიძლიათ.
  • თავი აარიდეთ ტექსტების დარენდერებას, როცა შეგიძლიათ.
  • ცადეთ განსხვავებული მეთოდები კანვასის გასასუფთავებლად (clearRect, fillRect და ზომის შეცვლად).
  • ანიმაციების გამოყენების დროს, ამჯობინეთ window.requestAnimationFrame გამოყენება, ვიდრე setInterval.
  • ყურადღებით გამოიყენეთ მძიმე ფიზიკის ბიბლიოთეკები, როცა იყენებთ ანიმაციებს.