Trwa tłumaczenie tego artykułu.

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 obiekt CanvasRenderingContext2D reprezentujący dwuwymiarowy kontekst renderowania.
  • "webgl" (lub "experimental-webgl"), tworzy obiekt 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).
  • "webgl2" tworzy obiekt 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).
  • "bitmaprenderer" tworzy ImageBitmapRenderingContext, 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 tesowym lub strowniki 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 na false, 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 operacji read-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ływaniu getImageData(). Opcja ta jest dostepna tylko jeśli flaga gfx.canvas.willReadFrequently.enable jest ustawiona na true (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" ).
Własności kontekstu WebGL:
  • 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 na true, 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ż

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes123.6993.1
webgl context

33

91

Yes1

241

3.6

111

15

91

5.11
webgl2 context56 No2

51

251

No No No
2d alpha context attribute32 ?30 No Yes No
failIfMajorPerformanceCaveat attribute Yes ?41 Yes Yes ?
bitmaprenderer context56 ?46 No43 No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes ?4 Yes Yes Yes
webgl context ? ? Yes Yes1 ? ? ?
webgl2 context ? No ? No No No No
2d alpha context attribute No No ?30 No No No
failIfMajorPerformanceCaveat attribute No No ?41 ? ? No
bitmaprenderer context No56 ?4643 No6.0

1. Supported as experimental-webgl.

2. WebGL 2 is under consideration in Edge, with a roadmap priority of medium. See the Edge Platform status for latest information.

Zobacz też

Autorzy i etykiety dokumentu

 Autorzy tej strony: JKarkosza
 Ostatnia aktualizacja: JKarkosza,