[ Leksykon ] [ JavaScript ] [ Metody ] [ Właściwości ] [ canvas ] [ HTMLCanvasElement() ]

HTMLCanvasElement.getContext()

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

getContext(contextType)
getContext(contextType, contextAttributes)

Przykłady:

<script>

 window.onload = () => {

 const szer = 400;
 const wys = 200;

 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 
 console.log(canvas.width);
 
 const ctx = canvas.getContext("2d");
 console.log(ctx);

 ctx.fillStyle = "blue";
 ctx.fillRect(0, 0, 80, 90);

 return;

 };

</script>

<canvas id="canvas" width="100" height="100"></canvas>

Opis:
Metoda HTMLCanvasElement.getContext() zwraca rysunek kontekst na kanwie lub null jeśli identyfikator kontekstu nie jest obsługiwane lub płótno zostało już ustawione w innym trybie kontekstowym. Późniejsze wywołania tej metody na tym samym elemencie canvas, z tym samym Argument contextType zawsze zwróci tę samą instancję kontekstu rysunku tak jak zostało zwrócone przy pierwszym wywołaniu metody. Parametry contextType - ciąg zawierający identyfikator kontekstu definiujący rysunek kontekst powiązany z płótnem. Możliwe wartości to: "2d" - co prowadzi do utworzenia a CanvasRenderingContext2D obiekt reprezentujący dwuwymiarowość kontekst renderowania. "webgl" - lub "experimental-webgl", który utworzy plik WebGLRenderingContext obiekt reprezentujący trójwymiarowość kontekst renderowania. Ten kontekst jest dostępny tylko w przeglądarkach obsługujących WebGL w wersji 1, OpenGL ES 2.0. "webgl2" - Eksperymentalny, który utworzy WebGL2RenderingContext obiekt reprezentujący trójwymiarowy kontekst renderowania. Ten kontekst jest tylko dostępne w przeglądarkach obsługujących WebGL wersja 2, OpenGL ES 3.0. "webgpu" - utworzy plik GPUCanvasContext obiekt reprezentujący trójwymiarowość kontekst renderowania dla renderowania WebGPU. Ten kontekst jest dostępny tylko w przeglądarkach, które implementują interfejs API WebGPU. "bitmaprenderer" - utworzy plik ImageBitmapRenderingContext, który zapewnia jedynie funkcjonalność zastąp zawartość płótna danym ImageBitmap. Parametr drugi contextAttributes - Opcjonalny, podczas tworzenia kontekstu renderowania możesz użyć kilku atrybutów kontekstu, na przykład przykład: ,{alpha: false,  colorSpace: "srgb",}. Atrybuty kontekstu 2D: alpha - wartość logiczna wskazująca, czy płótno zawiera kanał alfa. Jeśli ustawione na false, przeglądarka już to wie aby tło było zawsze nieprzezroczyste, co może przyspieszyć rysowanie przezroczystości treści i obrazy. colorSpace - opcjonalny określa przestrzeń kolorów kontekstu renderowania. Możliwe wartości to: "srgb" wybiera przestrzeń kolorów sRGB. To jest wartość domyślna. "display-p3" wybiera przestrzeń kolorów display-p3. desynchronized - Wartość logiczna wskazująca agenta użytkownika aby zmniejszyć opóźnienia poprzez desynchronizację cyklu malowania płótna ze zdarzeniem pętla, willReadFrequently - wartość logiczna wskazująca, czy lub nie planuje się wielu operacji odczytu zwrotnego. Wymusi to użycie w programowe, zamiast akcelerowanego sprzętowo, płótna 2D i może zaoszczędzić pamięć, gdy wywołując często getImageData(). Atrybuty kontekstu WebGL: alpha - wartość logiczna wskazująca, czy płótno zawiera bufor alfa, depth - wartość logiczna wskazująca, że ​​rysunek bufor jest wymagany, aby bufor głębokości miał co najmniej 16 bitów, stencil - wartość logiczna wskazująca, że ​​rysunek bufor musi mieć bufor szablonowy o długości co najmniej 8 bitów, desynchronized - wartość logiczna wskazująca agenta użytkownika aby zmniejszyć opóźnienia poprzez desynchronizację cyklu malowania płótna ze zdarzeniem pętli, antialias - wartość logiczna wskazująca, jeśli to możliwe, wykonać antyaliasing. failIfMajorPerformanceCaveat - wartość logiczna, która wskazuje, czy kontekst zostanie utworzony, jeśli wydajność systemu jest niska, czy sprzętowy procesor graficzny jest dostępny, powerPreference - wskazówka dla agenta użytkownika wskazując, jaka konfiguracja procesora graficznego jest odpowiednia dla kontekstu WebGL. Możliwy wartości to: "default" pozwól agentowi użytkownika zdecydować, jaka jest konfiguracja procesora graficznego najbardziej stosowny. Jest to wartość domyślna. "high-performance" priorytetowo traktuje wydajność renderowania pobór energii. "low-power" przedkłada oszczędzanie energii nad renderowanie wydajność. premultipliedAlpha - wartość logiczna, która to wskazuje kompozytor strony przyjmie, że bufor rysowania zawiera kolory wstępnie pomnożona alfa. preserveDrawingBuffer - jeśli wartość jest prawdziwa, to bufory nie zostaną wyczyszczone i zachowają swoje wartości do czasu wyczyszczenia lub nadpisane przez autora. xrCompatible - wartość logiczna wskazująca agentowi użytkownika aby użyć kompatybilnej karty graficznej dla immersyjne urządzenie XR. Ustawienie tego odradza się flagę synchroniczną podczas tworzenia kontekstu; raczej wywołaj asynchronicznie WebGLRenderingContext.makeXRCompatible() metodę w momencie, gdy to zrobisz zamierzasz rozpocząć sesję XR. Specyfikacja WebGPU nie definiuje żadnych konkretnych atrybutów kontekstu dla getContext(). Zamiast tego zapewnia opcje konfiguracji za pomocą metody GPUCanvasContext.configure(). Wartość zwracana kontekst renderowania, który jest: CanvasRenderingContext2D dla "2d", WebGLRenderingContext dla "webgl" i "experimental-webgl", WebGL2RenderingContext dla "webgl2", GPUCanvasContext dla "webgpu", ImageBitmapRenderingContext dla "bitmaprenderer". Jeśli contextType nie pasuje do możliwego kontekstu rysunku lub jest inny od pierwszego żądania contextType zwracane jest null.

Zobacz też:
CanvasRenderingContext2D() - Interfejs CanvasRenderingContext2D zapewnia kontekst renderowania 2D dla <canvas>
GPUCanvasContext -
GPUCanvasContext.configure() -
ImageBitmapRenderingContext -
WebGLRenderingContext -
WebGLRenderingContext.makeXRCompatible()
WebGL -
WebGPU API -