Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.
O metodo HTMLCanvasElement.getContext()
retorna um contexto de desenho no canvas, ou null
se o contexto identificado não é suportado.
Syntax
canvas.getContext(contextType, contextAttributes);
Parametros
- contextType
- É um
DOMString
contendo o contexto identificador definindo o contexto de desenho associado ao canvas. Os valores possiveis são:"2d"
, levando a criação de um objetoCanvasRenderingContext2D
representando uma renderização bidimensional."webgl"
(or"experimental-webgl"
) que criará um objetoWebGLRenderingContext
representando uma renderização tridimensional. Esse contexto está disponivel somente em browsers que implementam WebGL versão 1 (OpenGL ES 2.0)."webgl2"
que criará um objetoWebGL2RenderingContext
representando uma renderização tridimensional. Esse contexto está disponivel somente em browsers que implementam WebGL versão 2 (OpenGL ES 3.0)."bitmaprenderer"
que criará umImageBitmapRenderingContext
que apenas provê a funcionalidade de substituir o conteúdo do canvas pelo de umImageBitmap
.
Note: O identificador "
experimental-webgl
" é usado em novas implementações do WebGL. Essas implementações ou ainda não passaram nos casos de teste, ou os drivers gráficos na plataforma ainda não estão estáveis. O Khronos Group certifica as implementações do WebGL sob certas regas de conformidade. contextAttributes
-
Você pode usar alguns atributos de contexto quando criar o seu contexto de renderização, por exemplo:
canvas.getContext('webgl', { antialias: false, depth: false });
Atributos de contexto 2d:alpha
: Boleano que indica se o canvas contém um canal alfa. Se definido comofalse
, o browser saberá que o resultado será sempre opaco, o que pode acelerar o desenho de conteudo transparente e imagens.- (Gecko only)
willReadFrequently
: Boleano que indica quando uma série de operações read-back estão planejadas. Isso forçará o uso de renderização 2D no canvas via software (ao invés de utilizar GPU) o que pode salvar memoria quandogetImageData()
for chamado frequentemente. Essa opção está disponivel somente, se a flaggfx.canvas.willReadFrequently.enable
está definida comotrue
(o que, por padrão, é o caso do B2G/Firefox OS apenas). - (Blink only)
storage
: String que indica qual storage é usado ("persistent" por padrão).
alpha
: Boleano que indica se o canvas contém um buffer alfa.depth
: Boleano que indica que o buffer do desenho tem um buffer de profundidade de pelo menos 16 bits.stencil
: Boleano que indica que o buffer do desenho tem um buffer de stencil de pelo menos 8 bits.antialias
: Boleano que indica se deve realizar o anti-aliasing ou não.premultipliedAlpha
: Boleano que indica se o compositor da página vai assumir que o buffer do desenho contendo cores com alfa pré-multiplicado.preserveDrawingBuffer
: Se o valor étrue
os buffers não serão limpos e preservarão seus valores até serem limpos ou subrescritos pelo autor.-
failIfMajorPerformanceCaveat
: Boleano que indica se um contexto será criado se a performance do sistema for baixa.
Return value
Um RenderingContext
que pode ser:
CanvasRenderingContext2D
para"2d"
,WebGLRenderingContext
para"webgl"
e"experimental-webgl"
,WebGL2RenderingContext
para"webgl2"
ouImageBitmapRenderingContext
para"bitmaprenderer"
.
Se o contextType não bater com um possivel contexto de desenho,null
é retornado.
Examples
Dado este elemento <canvas>
:
<canvas id="canvas" width="300" height="300"></canvas>
Você pega um contexto 2d
do canvas com o código a seguir:
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); console.log(ctx); // CanvasRenderingContext2D { ... }
Agora você tem contexto de renderização 2d para o canvas e você pode desenhar nele.
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'HTMLCanvasElement.getContext' in that specification. |
Padrão em tempo real | Nenhuma mudança desde o ultimo snapshot, HTML5 |
HTML 5.1 The definition of 'HTMLCanvasElement.getContext' in that specification. |
Recomendação | |
HTML5 The definition of 'HTMLCanvasElement.getContext' in that specification. |
Recomendação | Snapshot do HTML Living Standard contendo a definição inicial. |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support (2d context) |
4 | (Yes) | 3.6 (1.9.2) | 9 | 9 | 3.1 |
webgl context |
9[1] 33 |
(Yes) | 3.6 (1.9.2)[1] 24 (24) |
11.0[2] | 9.0[3] | 5.1[2] |
webgl2 context |
56 | ? | 25 (25)[4] | Não suportado | Não suportado | Não suportado |
2d alpha context attribute |
32 | ? | 30 (30) | Não suportado | (Yes) | Não suportado |
|
(Yes) | ? | 41 (41) | (Yes) | (Yes) | ? |
bitmaprenderer context | Não suportado | ? | 46 (46) | Não suportado | Não suportado | Não suportado |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support (2d context) |
(Yes) | (Yes) | (Yes) | 1.0 (1.9.2) | (Yes) | (Yes) | (Yes) |
webgl context |
? | ? | (Yes) | (Yes)[2] | ? | ? | ? |
webgl2 context |
Não suportado | Não suportado | ? | Não suportado | Não suportado | Não suportado | Não suportado |
2d alpha context attribute |
Não suportado | Não suportado | ? | 30.0 (30) | Não suportado | Não suportado | Não suportado |
failIfMajorPerformanceCaveat attribute |
? | ? | ? | 41.0 (41) | ? | ? | ? |
bitmaprenderer context | Não suportado | Não suportado | ? | 46.0 (46) | Não suportado | Não suportado | Não suportado |
[1] Chrome 9 e Gecko 1.9.2 inicialmente implementaram isso como um experimental-webgl
. Desde o Chrome 33 e Gecko 24 é implementado como definido pelo padrão: webgl
.
[2] Internet Explorer 11, WebKit 5.1 e Firefox Mobile implementaram isso como um experimental-webgl
.
[3] Opera 9 implementou isso como um experimental-webgl
, ativado nas preferencias do usuario, na versão 15.0 a preferencia de usuario foi removida.
[4] Gecko 25 implementou isso como um "experimental-webgl2
" ativado na preferencia do usuario webgl.enable-prototype-webgl2
. Apartir do Gecko 42, a string "webgl2
"é usada na mesma configuração e "experimental-webgl2
" não é mais aceito.
See also
- A definição de interface,
HTMLCanvasElement
. OffscreenCanvas.getContext()
- Contextos de renderização disponiveis:
CanvasRenderingContext2D
,WebGLRenderingContext
andWebGL2RenderingContext
andImageBitmapRenderingContext
.