Czytasz angielską wersję tego artykułu, ponieważ nie ma jeszcze tłumaczenia dla tego języka. Pomóż nam przetłumaczyć ten artykuł!
Metoda HTMLCanvasElement.getContext()
zwraca kontekst pola roboczego <canvas>
, lub null
jeśli identyfikator kontekstu nie jest wspierany.
Składnia
var ctx = canvas.getContext(contextType); var ctx = canvas.getContext(contextType, contextAttributes);
Parametry
contextType
- Jest nim
DOMString
zawierający identyfikator kontekstu pola roboczego powiązanego z<canvas>
. Możliwe wartości to:"2d"
, tworzy obiektCanvasRenderingContext2D
reprezentujący dwuwymiarowy kontekst renderowania."webgl"
(lub"experimental-webgl"
), tworzy obiektWebGLRenderingContext
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)."webgl2"
tworzy obiektWebGL2RenderingContext
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)."bitmaprenderer"
tworzyImageBitmapRenderingContext
, który zapewnia możliwość zastąpenia treści<canvas>
na podanąImageBitmap
.
Nota: Identyfikator "
experimental-webgl
" 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. Grupa Khronos certyfikuje wdrożenia WebGL zgodnie z regułami zgodności. contextAttributes
-
Można użyć kilku własności kontekstu przy tworzeniu kontekstu renderowania, dla przykładu:
const gl = canvas.getContext('webgl', { antialias: false, depth: false });
- Własności kontekstu 2d:
alpha
: Boolean wskazujacy czy canvas zawiera kanał alpha. Jeśli ustawione nafalse
, przeglądarka wie, że tło zawsze jest nieprzeźroczyste, co może przyspieszyć rysowanie przeźroczystych treści i obrazków.- (Gecko only)
willReadFrequently
: Boolean wskazujący czy wiele operacjiread-back
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ływaniugetImageData()
. Opcja ta jest dostepna tylko jeśli flagagfx.canvas.willReadFrequently.enable
jest ustawiona natrue
(która, domyślnie, dotyczy tylko B2G/Firefox OS). - (Blink only)
storage
: String wskazujacy jaka pamięć jest używana (domyślnie jest to "stała" ).
alpha
: Boolean wskazujacy czy canvas zawiera bufor alpha.depth
: Boolean wskazujący czy bufor rysunku posiada bufor głębi o wartości co przynajmniej 16 bitów.stencil
: Boolean wskazujący czy bufor rysunku posiada bufor matrycy o wartości przynajmniej 8 bitów.antialias
: Boolean wskazujący czy używany ma byćanti-aliasing.
premultipliedAlpha
: Boolean wskazujący czy projektant strony założył, że bufor rysunku zawiera kolory ze wstepnie pomnożoną alfą.preserveDrawingBuffer
: Jeśli ustawiona natrue
, bufory nie zostaną wyczyszczone i zachowają swoje wartości, dopóki nie zostaną wyczyszczone lub nadpisane przez autora.failIfMajorPerformanceCaveat
: Boolean wskazujący czy kontekst będzie tworzony, jeśli wydajność systemu jest niska.
Wartości zwrotne
RenderingContext
jest też
CanvasRenderingContext2D
dla"2d"
,WebGLRenderingContext
dla"webgl"
i"experimental-webgl"
,WebGL2RenderingContext
dla"webgl2"
lubImageBitmapRenderingContext
dla"bitmaprenderer"
.
Jeśli contextType
nie może dopasować możliwych kontekstów rysowania, null
zostanie zwrócony.
Przykłady
Wykorzystując element <canvas>
:
<canvas id="canvas" width="300" height="300"></canvas>
Kontekst 2d
uzyskać można za pomocą kodu:
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); console.log(ctx); // CanvasRenderingContext2D { ... }
Tworzy to kontekst renderowania 2D, po którym można rysować.
Specyfikacja
Specyfikacja | Status | Komentarz |
---|---|---|
HTML Living Standard The definition of 'HTMLCanvasElement.getContext' in that specification. |
Living Standard | Brak zmian od ostatniego snapshota, HTML5 |
HTML 5.1 The definition of 'HTMLCanvasElement.getContext' in that specification. |
Recommendation | |
HTML5 The definition of 'HTMLCanvasElement.getContext' in that specification. |
Recommendation | Snapshot HTML Living Standard zawiera początkową definicje. |
Zgodność przeglądarek
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
getContext | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 3.6 | IE Full support 9 | Opera Full support 9 | Safari Full support 3.1 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
bitmaprenderer context | Chrome Full support 56 | Edge ? | Firefox Full support 46 | IE No support No | Opera Full support 43 | Safari No support No | WebView Android No support No | Chrome Android Full support 56 | Firefox Android Full support 46 | Opera Android Full support 43 | Safari iOS No support No | Samsung Internet Android Full support 6.0 |
failIfMajorPerformanceCaveat attribute | Chrome Full support Yes | Edge ? | Firefox Full support 41 | IE Full support Yes | Opera Full support Yes | Safari ? | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 41 | Opera Android ? | Safari iOS ? | Samsung Internet Android No support No |
powerPreference attribute | Chrome No support No | Edge No support No | Firefox Full support 63 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 63 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
WebGL context | Chrome
Full support
33
| Edge
Full support
Yes
| Firefox
Full support
24
| IE
Full support
11
| Opera
Full support
15
| Safari
Full support
5.1
| WebView Android
Full support
37
| Chrome Android
Full support
33
| Firefox Android
Full support
Yes
| Opera Android
Full support
14
| Safari iOS ? | Samsung Internet Android ? |
WebGL2 context | Chrome Full support 56 | Edge
No support
No | Firefox
Full support
51
| IE No support No | Opera No support No | Safari No support No | WebView Android Full support 56 | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
2d alpha context attribute | Chrome Full support 32 | Edge ? | Firefox Full support 30 | IE No support No | Opera Full support Yes | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 30 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- See implementation notes.
- See implementation notes.
- Uses a non-standard name.
- Uses a non-standard name.
Zobacz też
- Interfejs definiujacy element,
HTMLCanvasElement
. OffscreenCanvas.getContext()
- Dostępne konteksty renderowania:
CanvasRenderingContext2D
,WebGLRenderingContext
,WebGL2RenderingContext
iImageBitmapRenderingContext
.