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
121
122
123
124
125
126
127
128
129
|
---
title: HTMLCanvasElement.getContext()
slug: Web/API/HTMLCanvasElement/getContext
translation_of: Web/API/HTMLCanvasElement/getContext
---
<div>{{APIRef("Canvas API")}}</div>
<p class="summary">Metoda <strong><code>HTMLCanvasElement.getContext()</code></strong> zwraca kontekst pola roboczego {{HTMLElement("canvas")}}, lub {{jsxref("null")}} jeśli identyfikator kontekstu nie jest wspierany.</p>
<h2 id="Składnia">Składnia</h2>
<pre class="syntaxbox">var <em>ctx</em> = <em>canvas</em>.getContext(<em>contextType</em>);
var <em>ctx</em> = <em>canvas</em>.getContext(<em>contextType</em>, <em>contextAttributes</em>);
</pre>
<h3 id="Parametry">Parametry</h3>
<dl>
<dt><code><em>contextType</em></code></dt>
<dd>Jest nim {{domxref("DOMString")}} zawierający identyfikator kontekstu pola roboczego powiązanego z {{HTMLElement("canvas")}}. Możliwe wartości to:
<ul>
<li><code>"2d"</code>, tworzy obiekt {{domxref("CanvasRenderingContext2D")}} reprezentujący dwuwymiarowy kontekst renderowania.</li>
<li><code>"webgl"</code> (lub <code>"experimental-webgl"</code>), tworzy obiekt {{domxref("WebGLRenderingContext")}} reprezentujący trójwymiarowy kontekst renderowania. Ten kontekst dostępny jest tylko w przeglądarkach w których zaimplementowana jest wersja 1 WebGL (OpenGL ES 2.0).</li>
<li><code>"webgl2"</code> tworzy obiekt {{domxref("WebGL2RenderingContext")}} reprezentujący trójwymiarowy kontekst renderowania. Ten kontekst dostępny jest tylko w przeglądarkach w których zaimplementowana jest wersja 2 WebGL (OpenGL ES 3.0). {{experimental_inline}}</li>
<li><code>"bitmaprenderer"</code> tworzy {{domxref("ImageBitmapRenderingContext")}}, który zapewnia możliwość zastąpenia treści {{HTMLElement("canvas")}} na podaną {{domxref("ImageBitmap")}}.</li>
</ul>
<div class="note">
<p><strong>Nota</strong>: Identyfikator "<code>experimental-webgl</code>" jest używany przy nowych wdrożeniach WebGL. Wdrożenia te nie uzyskały zgodności z pakietem testowym lub sterowniki graficzne platformy nie są jeszcze stabilne. <a href="https://www.khronos.org/">Grupa Khronos </a>certyfikuje wdrożenia WebGL zgodnie z <a href="https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt">regułami zgodności</a>.</p>
</div>
</dd>
<dt><code><em>contextAttributes</em></code></dt>
<dd>
<p>Można użyć kilku własności kontekstu przy tworzeniu kontekstu renderowania, dla przykładu: </p>
<pre class="brush: js">const gl = canvas.getContext('webgl', {
antialias: false,
depth: false
});</pre>
</dd>
<dd>Własności kontekstu 2d:
<ul>
<li><strong><code>alpha</code></strong>: Boolean wskazujacy czy canvas zawiera kanał alpha. Jeśli ustawione na <code>false</code>, przeglądarka wie, że tło zawsze jest nieprzeźroczyste, co może przyspieszyć rysowanie przeźroczystych treści i obrazków. </li>
<li>{{non-standard_inline}} (Gecko only) <strong><code>willReadFrequently</code></strong>: Boolean wskazujący czy wiele operacji <code>read-back</code> zostało zaplanowanych. Spowoduje wymuszenie użycia oprogramowania (zamiast przyśpieszenia sprzętowego) 2D canvas i może pomóc w oszczędności pamięci przy częstym wywoływaniu {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Opcja ta jest dostepna tylko jeśli flaga <code>gfx.canvas.willReadFrequently.enable</code> jest ustawiona na <code>true</code> (która, domyślnie, dotyczy tylko B2G/Firefox OS).</li>
<li>{{non-standard_inline}} (Blink only) <strong><code>storage</code></strong>: String wskazujacy jaka pamięć jest używana (domyślnie jest to "stała" ).</li>
</ul>
Własności kontekstu WebGL:
<ul>
<li><strong><code>alpha</code></strong>: Boolean wskazujacy czy canvas zawiera bufor alpha.</li>
<li><strong><code>depth</code></strong>: Boolean wskazujący czy bufor rysunku posiada bufor głębi o wartości co przynajmniej 16 bitów.</li>
<li><strong><code>stencil</code></strong>: Boolean wskazujący czy bufor rysunku posiada bufor matrycy o wartości przynajmniej 8 bitów. </li>
<li><strong><code>antialias</code></strong>: Boolean wskazujący czy używany ma być <code>anti-aliasing.</code></li>
<li><strong><code>premultipliedAlpha</code></strong>: Boolean wskazujący czy projektant strony założył, że bufor rysunku zawiera kolory ze wstepnie pomnożoną alfą.</li>
<li><strong><code>preserveDrawingBuffer</code></strong>: Jeśli ustawiona na <code>true</code>, bufory nie zostaną wyczyszczone i zachowają swoje wartości, dopóki nie zostaną wyczyszczone lub nadpisane przez autora.</li>
<li><code><strong>failIfMajorPerformanceCaveat</strong></code>: Boolean wskazujący czy kontekst będzie tworzony, jeśli wydajność systemu jest niska.</li>
</ul>
</dd>
</dl>
<h3 id="Wartości_zwrotne">Wartości zwrotne</h3>
<p>{{domxref("RenderingContext")}} jest też</p>
<ul>
<li>{{domxref("CanvasRenderingContext2D")}} dla <code>"2d"</code>,</li>
<li>{{domxref("WebGLRenderingContext")}} dla <code>"webgl"</code> i <code>"experimental-webgl"</code>,</li>
<li>{{domxref("WebGL2RenderingContext")}} dla <code>"webgl2"</code> lub</li>
<li>{{domxref("ImageBitmapRenderingContext")}} dla <code>"bitmaprenderer"</code>.</li>
</ul>
<p>Jeśli <em><code>contextType</code></em> nie może dopasować możliwych kontekstów rysowania, <code><em>null</em></code> zostanie zwrócony.</p>
<h2 id="Przykłady">Przykłady</h2>
<p>Wykorzystując element {{HTMLElement("canvas")}}:</p>
<pre class="brush: html"><canvas id="canvas" width="300" height="300"></canvas>
</pre>
<p>Kontekst <code>2d</code> uzyskać można za pomocą kodu: </p>
<pre class="brush: js">var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
console.log(ctx); // CanvasRenderingContext2D { ... }
</pre>
<p>Tworzy to <a href="/en-US/docs/Web/API/CanvasRenderingContext2D">kontekst renderowania 2D</a>, po którym można rysować.</p>
<h2 id="Specyfikacja">Specyfikacja</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specyfikacja</th>
<th scope="col">Status</th>
<th scope="col">Komentarz</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Brak zmian od ostatniego snapshota, {{SpecName('HTML5 W3C')}}</td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Snapshot {{SpecName('HTML WHATWG')}} zawiera początkową definicje.</td>
</tr>
</tbody>
</table>
<h2 id="Zgodność_przeglądarek">Zgodność przeglądarek</h2>
<p>{{Compat("api.HTMLCanvasElement.getContext")}}</p>
<h2 id="Zobacz_też">Zobacz też</h2>
<ul>
<li>Interfejs definiujacy element, {{domxref("HTMLCanvasElement")}}.</li>
<li>{{domxref("OffscreenCanvas.getContext()")}}</li>
<li>Dostępne konteksty renderowania: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}}, {{domxref("WebGL2RenderingContext")}} i {{domxref("ImageBitmapRenderingContext")}}.</li>
</ul>
|
