diff options
Diffstat (limited to 'files/pt-br/web/html/canvas/index.html')
| -rw-r--r-- | files/pt-br/web/html/canvas/index.html | 134 |
1 files changed, 134 insertions, 0 deletions
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 +--- +<p>{{CanvasSidebar}}</p> + +<p class="summary">A <strong>Canvas API</strong> provê maneiras de desenhar gráficos via <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript">JavaScript</a> e via elemento <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML">HTML</a> {{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.</p> + +<p class="summary">A Canvas API foca amplamente em gráficos 2D. A <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL">WebGL API</a>, que também usa o elemento <code><canvas></code>, desenha gráficos 2D e 3D acelerados por hardware.</p> + +<h2 id="Exemplo_básico">Exemplo básico</h2> + +<p>Este exemplo simples desenha um retângulo verde para um canvas.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<p>O método {{domxref("Document.getElementById()")}} pega uma referência para o elemento HTML <code><canvas></code>. Em seguida, o método {{domxref("HTMLCanvasElement.getContext()")}} pega o contexto daquele elemento - a coisa sobre a qual o desenho será renderizado.</p> + +<p>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.</p> + +<pre class="brush: js">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); + +ctx.fillStyle = 'green'; +ctx.fillRect(10, 10, 150, 100); +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Exemplo_básico', 700, 180) }}</p> + +<h2 id="Referência">Referência</h2> + +<ul> + <li>{{domxref("HTMLCanvasElement")}}</li> + <li>{{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasGradient")}}</li> + <li>{{domxref("CanvasImageSource")}}</li> + <li>{{domxref("CanvasPattern")}}</li> + <li>{{domxref("ImageBitmap")}}</li> + <li>{{domxref("ImageData")}}</li> + <li>{{domxref("RenderingContext")}}</li> + <li>{{domxref("TextMetrics")}}</li> + <li>{{domxref("OffscreenCanvas")}} {{experimental_inline}}</li> + <li>{{domxref("Path2D")}} {{experimental_inline}}</li> + <li>{{domxref("ImageBitmapRenderingContext")}} {{experimental_inline}}</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> As interfaces relacionadas ao <code>WebGLRenderingContext</code> são referenciadas sob <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p> +</div> + +<p>{{domxref("CanvasCaptureMediaStream")}} é uma interface relacionada.</p> + +<h2 id="Guias_e_Tutoriais">Guias e Tutoriais</h2> + +<dl> + <dt></dt> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">Tutorial Canvas</a></dt> + <dd>Um tutorial compreensivo abordando o uso básico da API de Canvas e suas funcionalidades avançadas.</dd> + <dt><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">Mergulhando no Canvas HTML5</a></dt> + <dd>Uma introdução prática e extensa à API Canvas e WebGL.</dd> + <dt><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Guia Canvas</a></dt> + <dd>Uma referência acessível para a API Canvas.</dd> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demonstração: Um <em>ray-caster</em> básico</a> </dt> + <dd>Uma demonstração de animação <em>ray-tracing</em> usando canvas.</dd> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulando vídeos usando canvas</a></dt> + <dd>Combinando {{HTMLElement("video")}} e {{HTMLElement("canvas")}} para manipular dados de vídeo em tempo real.</dd> +</dl> + +<h2 id="Bibliotecas">Bibliotecas</h2> + +<p>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.</p> + +<ul> + <li><a href="http://www.createjs.com/easeljs">EaselJS</a> é uma biblioteca de código aberto que facilita criações de jogos, arte generativa e outras experiências altamente gráficas.</li> + <li><a href="http://fabricjs.com/">Fabric.js</a> é uma biblioteca código aberto em canvas com suporte à SVG.</li> + <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> é uma biblioteca de código aberto para criar mapas de calor (heatmaps) baseados em canvas.</li> + <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> cria visualizações de dados interativas.</li> + <li><a href="https://konvajs.github.io/">Konva.js</a> é uma biblioteca de canvas 2D para aplicações <em>desktop</em> e móveis.</li> + <li><a href="https://p5js.org/">p5.js </a>tem um conjunto completo de funcionalidades de desenho canvas para artistas, <em>designers</em>, educadores e iniciantes.</li> + <li><a href="http://paperjs.org/">Paper.js</a> é um framework de código-aberto para scripting de vetores gŕaficos que funciona sobre o Canvas HTML5.</li> + <li><a href="https://phaser.io/">Phaser</a> é um framework de código-aberto rápido, grátis e divertido para jogos de navegador desenvolvidos com Canvas e WebGL.</li> + <li><a href="http://processingjs.org/">Processing.js</a> é um conversor da linguagem de visualização Processing.</li> + <li><a href="https://ptsjs.org/">Pts.js</a> é uma biblioteca para codificação criativa e visualização em canvas e SVG.</li> + <li><a href="https://github.com/jeremyckahn/rekapi">Rekapi</a> é uma API de animação <em>key-framing</em> para Canvas.</li> + <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> é uma biblioteca JavaScript de código aberto para criação e manipulação de elementos canvas 2D.</li> + <li>O framework <a href="http://zimjs.com/">ZIM</a> provê conveniências, componentes e controles para programar criatividade no canvas - inclui acessibilidade e centenas de tutoriais cheios de cores.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Veja a <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL API</a> para bibliotecas 2D e 3D que usam WebGL.</p> +</div> + +<h2 id="Especificações">Especificações</h2> + +<div class="section"> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Estado</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#2dcontext', 'the 2D rendering context')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + +<p>Aplicações Mozilla ganharam suporte para <code><canvas></code> a partir do Gecko 1.8 (<a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>). O elemento foi originalmente introduzido pela Apple para o Dashboard OS X e Safari. O Internet Explorer suporta <code><canvas></code> quando inclui-se um script do projeto Explorer Canvas, da google. Google Chrome e Opera 9 também suportam <code><canvas></code>.</p> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a></li> +</ul> |