From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/html/canvas/index.html | 134 +++++++++++++++++++++++++++++++++ 1 file changed, 134 insertions(+) create mode 100644 files/pt-br/web/html/canvas/index.html (limited to 'files/pt-br/web/html/canvas/index.html') diff --git a/files/pt-br/web/html/canvas/index.html b/files/pt-br/web/html/canvas/index.html new file mode 100644 index 0000000000..821909e726 --- /dev/null +++ b/files/pt-br/web/html/canvas/index.html @@ -0,0 +1,134 @@ +--- +title: Canvas +slug: Web/HTML/Canvas +tags: + - API + - Canvas + - Referência(2) +translation_of: Web/API/Canvas_API +--- +

{{CanvasSidebar}}

+ +

A Canvas API provê maneiras de desenhar gráficos via JavaScript e via elemento HTML {{HtmlElement("canvas")}}. Entre outras coisas, ele pode ser utilizado para animação, gráficos de jogos, visualização de dados, manipulação de fotos e processamento de vídeo em tempo real.

+ +

A Canvas API foca amplamente em gráficos 2D. A WebGL API, que também usa o elemento <canvas>, desenha gráficos 2D e 3D acelerados por hardware.

+ +

Exemplo básico

+ +

Este exemplo simples desenha um retângulo verde para um canvas.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

O método {{domxref("Document.getElementById()")}} pega uma referência para o elemento HTML <canvas>. Em seguida, o método {{domxref("HTMLCanvasElement.getContext()")}} pega o contexto daquele elemento - a coisa sobre a qual o desenho será renderizado.

+ +

O desenho atual é feito usando a interface {{domxref("CanvasRenderingContext2D")}}. A propriedade {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} faz o retângulo verde. O método {{domxref("CanvasRenderingContext2D.fillRect()", "fillRect()")}} coloca seu canto superior direito em (10, 10) e dá a ele o tamanho de 150 unidades de largura e 100 de altura.

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 150, 100);
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Exemplo_básico', 700, 180) }}

+ +

Referência

+ + + +
+

Nota: As interfaces relacionadas ao WebGLRenderingContext são referenciadas sob WebGL.

+
+ +

{{domxref("CanvasCaptureMediaStream")}} é uma interface relacionada.

+ +

Guias e Tutoriais

+ +
+
+
Tutorial Canvas
+
Um tutorial compreensivo abordando o uso básico da API de Canvas e suas funcionalidades avançadas.
+
Mergulhando no Canvas HTML5
+
Uma introdução prática e extensa à API Canvas e WebGL.
+
Guia Canvas
+
Uma referência acessível para a API Canvas.
+
Demonstração: Um ray-caster básico 
+
Uma demonstração de animação ray-tracing usando canvas.
+
Manipulando vídeos usando canvas
+
Combinando {{HTMLElement("video")}} e {{HTMLElement("canvas")}} para manipular dados de vídeo em tempo real.
+
+ +

Bibliotecas

+ +

A API Canvas é extremamente poderosa, mas nem sempre é simples de usar. As bibliotecas listadas abaixo podem fazer a criação de projetos baseados em canvas mais rápida e fácil.

+ + + +
+

Nota: Veja a WebGL API para bibliotecas 2D e 3D que usam WebGL.

+
+ +

Especificações

+ +
+ + + + + + + + + + + + + + + +
EspecificaçõesEstadoComentário
{{SpecName('HTML WHATWG', '#2dcontext', 'the 2D rendering context')}}{{Spec2('HTML WHATWG')}}
+
+ +

Compatibilidade de navegador

+ +

Aplicações Mozilla ganharam suporte para <canvas> a partir do Gecko 1.8 (Firefox 1.5). O elemento foi originalmente introduzido pela Apple para o Dashboard OS X e Safari. O Internet Explorer suporta <canvas> quando inclui-se um script do projeto Explorer Canvas, da google. Google Chrome e Opera 9 também suportam <canvas>.

+ +

Ver também

+ + -- cgit v1.2.3-54-g00ecf