diff options
Diffstat (limited to 'files/pt-br/web/api/htmlcanvaselement/getcontext/index.html')
| -rw-r--r-- | files/pt-br/web/api/htmlcanvaselement/getcontext/index.html | 292 |
1 files changed, 292 insertions, 0 deletions
diff --git a/files/pt-br/web/api/htmlcanvaselement/getcontext/index.html b/files/pt-br/web/api/htmlcanvaselement/getcontext/index.html new file mode 100644 index 0000000000..c50cd97abb --- /dev/null +++ b/files/pt-br/web/api/htmlcanvaselement/getcontext/index.html @@ -0,0 +1,292 @@ +--- +title: HTMLCanvasElement.getContext() +slug: Web/API/HTMLCanvasElement/getContext +tags: + - API + - Canvas + - HTMLCanvasElement + - Referencia + - metodo +translation_of: Web/API/HTMLCanvasElement/getContext +--- +<div>{{APIRef("Canvas API")}}</div> + +<p>O metodo <strong><code>HTMLCanvasElement.getContext()</code></strong> retorna um contexto de desenho no canvas, ou {{jsxref("null")}} se o contexto identificado não é suportado.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var><em>canvas</em>.getContext(<em>contextType, contextAttributes</em>);</var> +</pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt>contextType</dt> + <dd>É um {{domxref("DOMString")}} contendo o contexto identificador definindo o contexto de desenho associado ao canvas. Os valores possiveis são: + <ul> + <li><code>"2d"</code>, levando a criação de um objeto {{domxref("CanvasRenderingContext2D")}} representando uma renderização bidimensional.</li> + <li><code>"webgl"</code> (or <code>"experimental-webgl"</code>) que criará um objeto {{domxref("WebGLRenderingContext")}} representando uma renderização tridimensional. Esse contexto está disponivel somente em browsers que implementam <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> versão 1 (OpenGL ES 2.0).</li> + <li><code>"webgl2"</code> que criará um objeto {{domxref("WebGL2RenderingContext")}} representando uma renderização tridimensional. Esse contexto está disponivel somente em browsers que implementam <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> versão 2 (OpenGL ES 3.0). {{experimental_inline}}</li> + <li><code>"bitmaprenderer"</code> que criará um {{domxref("ImageBitmapRenderingContext")}} que apenas provê a funcionalidade de substituir o conteúdo do canvas pelo de um {{domxref("ImageBitmap")}}.</li> + </ul> + + <div class="note"> + <p><strong>Note</strong>: O identificador "<code>experimental-webgl</code>" é 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 <a href="https://www.khronos.org/">Khronos Group</a> certifica as implementações do WebGL sob certas <a href="https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt">regas de conformidade</a>.</p> + </div> + </dd> + <dt><code>contextAttributes</code></dt> + <dd> + <p>Você pode usar alguns atributos de contexto quando criar o seu contexto de renderização, por exemplo:</p> + + <pre class="brush: js">canvas.getContext('webgl', + { antialias: false, + depth: false });</pre> + Atributos de contexto 2d: + + <ul> + <li><strong><code>alpha</code></strong>: Boleano que indica se o canvas contém um canal alfa. Se definido como <code>false</code>, o browser saberá que o resultado será sempre opaco, o que pode acelerar o desenho de conteudo transparente e imagens.</li> + <li>{{non-standard_inline}} (Gecko only) <strong><code>willReadFrequently</code></strong>: 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 quando {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} for chamado frequentemente. Essa opção está disponivel somente, se a flag <code>gfx.canvas.willReadFrequently.enable</code> está definida como <code>true</code> (o que, por padrão, é o caso do B2G/Firefox OS apenas).</li> + <li>{{non-standard_inline}} (Blink only) <strong><code>storage</code></strong>: String que indica qual storage é usado ("persistent" por padrão).</li> + </ul> + Atributos de contexto WebGL: + + <ul> + <li><strong><code>alpha</code></strong>: Boleano que indica se o canvas contém um buffer alfa.</li> + <li><strong><code>depth</code></strong>: Boleano que indica que o buffer do desenho tem um buffer de profundidade de pelo menos 16 bits.</li> + <li><strong><code>stencil</code></strong>: Boleano que indica que o buffer do desenho tem um buffer de stencil de pelo menos 8 bits.</li> + <li><strong><code>antialias</code></strong>: Boleano que indica se deve realizar o anti-aliasing ou não.</li> + <li><strong><code>premultipliedAlpha</code></strong>: Boleano que indica se o compositor da página vai assumir que o buffer do desenho contendo cores com alfa pré-multiplicado.</li> + <li><strong><code>preserveDrawingBuffer</code></strong>: Se o valor é <code>true</code> os buffers não serão limpos e preservarão seus valores até serem limpos ou subrescritos pelo autor.</li> + <li> + <p><code><strong>failIfMajorPerformanceCaveat</strong></code>: Boleano que indica se um contexto será criado se a performance do sistema for baixa.</p> + </li> + </ul> + </dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>Um {{domxref("RenderingContext")}} que pode ser:</p> + +<ul> + <li>{{domxref("CanvasRenderingContext2D")}} para <code>"2d"</code>,</li> + <li>{{domxref("WebGLRenderingContext")}} para <code>"webgl"</code> e <code>"experimental-webgl"</code>,</li> + <li>{{domxref("WebGL2RenderingContext")}} para <code>"webgl2"</code> ou</li> + <li>{{domxref("ImageBitmapRenderingContext")}} para <code>"bitmaprenderer"</code>.</li> +</ul> + +<p>Se o <em>contextType</em> não bater com um possivel contexto de desenho,<code>null</code> é retornado.</p> + +<h2 id="Examples">Examples</h2> + +<p>Dado este elemento {{HTMLElement("canvas")}}:</p> + +<pre class="brush: html"><canvas id="canvas" width="300" height="300"></canvas> +</pre> + +<p>Você pega um contexto <code>2d</code> do canvas com o código a seguir:</p> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +console.log(ctx); // CanvasRenderingContext2D { ... } +</pre> + +<p>Agora você tem <a href="/en-US/docs/Web/API/CanvasRenderingContext2D">contexto de renderização 2d</a> para o canvas e você pode desenhar nele.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Nenhuma mudança desde o ultimo snapshot, {{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 do {{SpecName('HTML WHATWG')}} contendo a definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support (<code>2d</code> context)</td> + <td>{{CompatChrome(4)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td>{{CompatIE(9)}}</td> + <td>{{CompatOpera(9)}}</td> + <td>{{CompatSafari(3.1)}}</td> + </tr> + <tr> + <td><code>webgl</code> context</td> + <td>{{CompatChrome(9)}}<sup>[1]</sup><br> + {{CompatChrome(33)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop('1.9.2')}}<sup>[1]</sup><br> + {{CompatGeckoDesktop('24')}}</td> + <td>11.0<sup>[2]</sup></td> + <td>9.0<sup>[3]</sup></td> + <td>5.1<sup>[2]</sup></td> + </tr> + <tr> + <td><code>webgl2</code> context </td> + <td>{{CompatChrome(56)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop('25')}}<sup>[4]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>2d <code>alpha</code> context attribute</td> + <td>32</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(30)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td> + <p><code>failIfMajorPerformanceCaveat</code> attribute</p> + </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(41)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>bitmaprenderer context</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(46)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support (<code>2d</code> context)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>webgl</code> context</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>webgl2</code> context </td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>2d <code>alpha</code> context attribute</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(30)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>failIfMajorPerformanceCaveat</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(41)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>bitmaprenderer context</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(46)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Chrome 9 e Gecko 1.9.2 inicialmente implementaram isso como um <code>experimental-webgl</code>. Desde o Chrome 33 e Gecko 24 é implementado como definido pelo padrão: <code>webgl</code>.</p> + +<p>[2] Internet Explorer 11, WebKit 5.1 e Firefox Mobile implementaram isso como um <code>experimental-webgl</code>.</p> + +<p>[3] Opera 9 implementou isso como um <code>experimental-webgl</code>, ativado nas preferencias do usuario, na versão 15.0 a preferencia de usuario foi removida.</p> + +<p>[4] Gecko 25 implementou isso como um "<code>experimental-webgl2</code>" ativado na preferencia do usuario <code>webgl.enable-prototype-webgl2</code>. Apartir do Gecko 42, a string "<code>webgl2</code>"é usada na mesma configuração e "<code>experimental-webgl2</code>" não é mais aceito.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>A definição de interface, {{domxref("HTMLCanvasElement")}}.</li> + <li>{{domxref("OffscreenCanvas.getContext()")}}</li> + <li>Contextos de renderização disponiveis: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} and {{domxref("WebGL2RenderingContext")}} and {{domxref("ImageBitmapRenderingContext")}}.</li> +</ul> |