1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
---
title: Optymalizacja elementu canvas
slug: Web/API/Canvas_API/Tutorial/Optimizing_canvas
tags:
- Canvas
- Grafika
- HTML
- HTML5
- Poradnik
- Tutorial
- zaawansowany
translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas
original_slug: Web/API/Canvas_API/Tutorial/Optymalizacja_canvas
---
<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</div>
<div class="summary">
<p>{{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 <span class="st">„</span>płótna" maksimum jego możliwości. Niestety, równie często prowadzi to do spadków wydajności. <span class="seoSummary">W tym artykule przygotowaliśmy dla was kilka wskazówek jak zoptymalizować element canvas, aby poprawić działanie waszych stron i aplikacji.</span></p>
</div>
<h2 id="Wskazówki_dot._wydajności">Wskazówki dot. wydajności</h2>
<p>Poniżej znajdziecie kilka rozwiązań, które poprawią wydajność elementu canvas:</p>
<h3 id="Pre-renderuj_proste_lub_powtażające_się_obiekty_na_dodatkowym_canvasie_poza_ekranem">Pre-renderuj proste lub powtażające się obiekty na dodatkowym canvasie poza ekranem</h3>
<p>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.</p>
<pre class="brush: js">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);
</pre>
<h3 id="Staraj_się_używać_liczb_całkowitch_do_koordynatów">Staraj się używać liczb całkowitch do koordynatów</h3>
<p>Renderowanie między pikselami zachodzi, gdy rysujesz obiekt używając niepełnych wartości.</p>
<pre class="brush: js">ctx.drawImage(myImage, 0.3, 0.5);
</pre>
<p>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()")}}.</p>
<h3 id="Nie_skaluj_obrazów_za_pomocą_drawImage">Nie skaluj obrazów za pomocą <code>drawImage</code></h3>
<p>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.</p>
<h3 id="Używaj_wielu_warstw_w_skomplikowanych_scenach">Używaj wielu warstw w skomplikowanych scenach</h3>
<p>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.</p>
<p>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.</p>
<pre class="brush: html"><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>
</pre>
<h3 id="Użyj_CSS_dla_dużych_obrazów_w_tle">Użyj CSS dla dużych obrazów w tle</h3>
<p>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.</p>
<h3 id="Skaluj_canvas_za_pomocą_CSS">Skaluj canvas za pomocą CSS</h3>
<p><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">Transformacje CSS</a> są szybsze dzięki wykorzystaniu karty graficznej. Powiększanie canvasu działa szybciej niż jego pomniejszanie. Dla Firefox OS ustaw 480 x 320 px.</p>
<pre class="brush: js">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 + ')';
</pre>
<h3 id="Wyłącz_przezroczystość">Wyłącz przezroczystość</h3>
<p>Jeśli twoja gra korzysta z canvasu i nie ma potrzeby, by był on przezroczysty, ustaw wartość <code>alpha</code> na <code>false</code> podczas tworzenia kontekstu: <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext" title="The HTMLCanvasElement.getContext() method returns a drawing context on the canvas, or null if the context identifier is not supported."><code>HTMLCanvasElement.getContext()</code></a>. To powinno poprawić wydajność.</p>
<pre class="brush: js">var ctx = canvas.getContext('2d', { alpha: false });</pre>
<h3 id="Pozostałe_wskazówki">Pozostałe wskazówki</h3>
<ul>
<li>Ujednolić wywołania canvasu (przykładowo, narysuj linię łamaną zamiast kilku osobnych linii).</li>
<li>Unikaj niepotrzebnych zmian stanu canvasu.</li>
<li>Renderuj tylko fragmenty, które uległy zmianie, zamiast całej, nowej klatki.</li>
<li>Unikaj {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} kiedy to możliwe.</li>
<li>Unikaj wyświetlania tekstu, kiedy to możliwe.</li>
<li>Wykorzystuj różne sposoby na wyczyszczenie canvasu: ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}, {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} lub zmiana rozmiaru canvasu).</li>
<li>Do tworzenie animacji skorzystaj z {{domxref("window.requestAnimationFrame()")}} zamiast {{domxref("window.setInterval()")}} .</li>
<li>Ostrożnie używaj dużych bibliotek do obliczania fizyki.</li>
</ul>
<h2 id="Zobacz_również">Zobacz również:</h2>
<ul>
<li><a href="http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-ref">Poprawa wydajności Canvas HTML5 – HTML5 </a></li>
<li><a href="https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/">Optymalizacja skryptów JavaScript na Firefox OS – Mozilla Hacks</a></li>
</ul>
<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</p>
|
