We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Wystąpił błąd skryptu na tej stronie. Edytorzy witryny zostali o tym powiadomieni. W tym czasie można poniżej zobaczyć część jej treści.

To tłumaczenie jest niekompletne. Pomóż przetłumaczyć ten artykuł z języka angielskiego.

{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}

{{HTMLElement("canvas")}}  to jeden z najczęściej używanych standardów do renderowania grafiki 2D w przeglądarce. Zazwyczaj stosuje się go do tworzenia gier i skomplikowanych wizualizacji, które nierzadko starają się wycinąć z płótna" maksimum jego możliwości. Niestety, równie często prowadzi to do spadków wydajności. W tym artykule przygotowaliśmy dla was kilka wskazówek jak zoptymalizować element canvas, aby poprawić działanie waszych stron i aplikacji.

Wskazówki dot. wydajności

Poniżej znajdziecie kilka rozwiązań, które poprawią wydajność elementu canvas:

Pre-renderuj proste lub powtażające się obiekty na dodatkowym canvasie poza ekranem

Jeśli w każdej klatce rysujesz wiele podobnych obiektów, stwórz niewyświetlany, roboczy canvas, narysuj na nim swój element raz (lub za każdym razem gdy ulega zmianom), a następnie wykorzystaj render w głównym canvasie.

obiekt.canvasRoboczy = document.createElement('canvas');
obiekt.canvasRoboczy.width = obiekt.width;
obiekt.canvasRoboczy.height = obiekt.height;
obiekt.canvasRoboczy = obiekt.canvasRoboczy.getContext('2d');

obiekt.render(obiekt.offscreenContext);

Staraj się używać liczb całkowitch do koordynatów

Renderowanie między pikselami zachodzi, gdy rysujesz obiekt używając niepełnych wartości.

ctx.drawImage(myImage, 0.3, 0.5);

Ta praktyka zmusza przeglądarkę do wykonania dodatkowych obliczeń, by wytworzyć efekt anty-aliasingu. Żeby temu zapobiec, zaokrąglij koordynaty, na przykład przy użyciu {{jsxref("Math.floor()")}}.

Nie skaluj obrazów za pomocą drawImage

Posłuż się canvasem poza ekranem, renderując swój obrazek w kilku różnych rozmiarach podczas ładowania, zamiast renderować go w każdej klatce.

Używaj wielu warstw w skomplikowanych scenach

Tak jak niektóre elementy nieustannie są w ruchu, inne (jak np. UI) nigdy nie zmieniają położenia. Dobrym sposobem na optymalizację w tej sytuacji jest zastosowanie warstw przy użyciu kilku canvasów roboczych.

Przykładowo, możesz stworzyć warstwę dla interfejsu rysowaną nad innymi, która aktualizuje się tylko w momentach, gdy jest używana. Oprócz tego, możesz przenaczyć jedną warstwę na pierwszy plan, gdzie umieścisz wszystkie elementy, które odnawiane są często oraz jedną warstwę na tło, na której obiekty aktualizowane są bardzo rzadko.

<div id="scena">
  <canvas id="warstwaUi" width="480" height="320"></canvas>
  <canvas id="warstwaGry" width="480" height="320"></canvas>
  <canvas id="warstwaTla" width="480" height="320"></canvas>
</div>
 
<style>
  #scena {
    width: 480px;
    height: 320px;
    position: relative;
    border: 2px solid black
  }
  canvas { position: absolute; }
  #warstwaUI { z-index: 3 }
  #warstwaGry { z-index: 2 }
  #warstwaTla { z-index: 1 }
</style>

Użyj CSS dla dużych obrazów w tle

Jeśli twoja gra, jak większość, posiada statyczne tło, stwórz element {{HTMLElement("div")}} z własnością CSS {{cssxref("background")}} , który umieścisz pod canvasem. Dzięki temu unikniesz rysowania dużego obrazu w każdej klatce z osobna.

Skaluj canvas za pomocą CSS

Transformacje CSS są szybsze dzięki wykorzystaniu karty graficznej. Powiększanie canvasu działa szybciej niż jego pomniejszanie. Dla Firefox OS ustaw 480 x 320 px.

var scaleX = window.innerWidth / canvas.width;
var scaleY = window.innerHeight / canvas.height;

var scaleToFit = Math.min(scaleX, scaleY);
var scaleToCover = Math.max(scaleX, scaleY);

stage.style.transformOrigin = '0 0'; //scale from top left
stage.style.transform = 'scale(' + scaleToFit + ')';

Wyłącz przezroczystość

Jeśli twoja gra korzysta z canvasu i nie ma potrzeby, by był on przezroczysty, ustaw wartość alpha na false podczas tworzenia kontekstu: HTMLCanvasElement.getContext(). To powinno poprawić wydajność.

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

Pozostałe wskazówki

  • Ujednolić wywołania canvasu (przykładowo, narysuj linię łamaną zamiast kilku osobnych linii).
  • Unikaj niepotrzebnych zmian stanu canvasu.
  • Renderuj tylko fragmenty, które uległy zmianie, zamiast całej, nowej klatki.
  • Unikaj {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} kiedy to możliwe.
  • Unikaj wyświetlania tekstu, kiedy to możliwe.
  • Wykorzystuj różne sposoby na wyczyszczenie canvasu: ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}, {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} lub zmiana rozmiaru canvasu).
  • Do tworzenie animacji skorzystaj z  {{domxref("window.requestAnimationFrame()")}} zamiast {{domxref("window.setInterval()")}} .
  • Ostrożnie używaj dużych bibliotek do obliczania fizyki.

Zobacz również:

{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}

Autorzy i etykiety dokumentu

Autorzy tej strony: Ovkorz
Ostatnia aktualizacja: Ovkorz,