initial commit

2 files changed, 210 insertions, 0 deletions

diff --git a/files/pt-br/web/html/canvas/a_basic_ray-caster/index.html b/files/pt-br/web/html/canvas/a_basic_ray-caster/index.html
new file mode 100644
index 0000000000..ca188eb6f9
--- /dev/null
+++ b/files/pt-br/web/html/canvas/a_basic_ray-caster/index.html
@@ -0,0 +1,76 @@
+---
+title: A basic ray-caster
+slug: Web/HTML/Canvas/A_basic_ray-caster
+translation_of: Web/API/Canvas_API/A_basic_ray-caster
+---
+<div>{{CanvasSidebar}}</div>
+
+<div class="summary">
+<p>Esse artigo disponibiliza um exemplo interessante do mundo real do uso do elemento {{HTMLElement("canvas")}} para fazer renderização via software de um ambiente em 3D utilizando <em>ray-casting</em>.</p>
+</div>
+
+<p>{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}</p>
+
+<p><strong><a href="http://mdn.github.io/canvas-raycaster/">Abrir em uma nova janela</a></strong></p>
+
+<h2 id="Why.3F" name="Why.3F">Porquê?</h2>
+
+<p>Depois de perceber, para meu deleite, que o elemento &lt;canvas&gt; que eu estava <a href="http://www.whatwg.org/specs/web-apps/current-work/#dynamic">lendo sobre</a> ele não estava apenas próximo de ser suportado pelo Firefox, mas que <strong>já</strong> estava com suporte na versão atual do Safari, eu tinha que tentar que fazer um pequeno teste.</p>
+
+<p>A <a href="/pt-BR/docs/Web/API/Canvas_API">visão geral do canvas</a> e o <a href="/pt-BR/docs/Canvas_tutorial">tutorial</a> que eu encontrei no MDN são incríveis, mas ninguém havia escrito sobre animação, então eu pensei que poderia portar um exemplo de raycaster básico que eu havia trabalhado um tempo atrás, e ver e ver que tipo de performance nós podemos esperar te um pixel buffer controlado por JavaScript.</p>
+
+<p> </p>
+
+<h2 id="How.3F" name="How.3F">Como?</h2>
+
+<p>A ideia básica é usar o {{domxref("window.setInterval","setInterval()")}} com um delay arbitrário que corresponda a uma taxa de atualização desejada. Depois de cada intervalo uma função de atualização irá redesenhar o canvas mostrando a view atual. Eu sei que poderia ter iniciado com um exemplo mais simples, mas estou certo que o tutorial do canvas vai fazê-lo, e eu queria verificar se poderia fazer isso.</p>
+
+<p>Sendo assim, a cada atualização, o raycaster verifica se você pressionou qualquer tecla por último, para conservar os cálculos não fazendo casting caso você esteja ocioso. Se você tiver pressionado, então o canvas é limpo, o solo e o céu são desenhados, a posição da câmera e/ou a orientação são atualizados, e os raios são feitos. <span id="result_box" lang="pt"><span title="As the rays intersect walls, then they render a vertical sliver of canvas in the color of the wall they've hit, blended with a darker version of the color according to the distance to the wall.">Como os raios se cruzam paredes, então eles tornam uma tira de tela vertical na cor da parede que eles atingiram, misturado com uma versão mais escura da cor de acordo com a distância para a parede. </span><span title="The height of the sliver is also modulated by the distance from the camera to the wall, and is drawn centered over the horizon line.
+
+">A altura da fita também é modulada pela distância da câmera para a parede, e é desenhada centrada sobre a linha do horizonte.</span><br>
+ <br>
+ <span title="The code I ended up with is a regurgitated amalgam of the raycaster chapters from an old André LaMotheTricks of the Game Programming Gurus book (ISBN: 0672305070), and a java raycaster I found online, filtered through my compulsion to rename everything so it makes sense">O código que eu acabei com é um amálgama regurgitado dos capítulos de raycaster de um velho André LaMothe<em>Tricks</em> do <em>livro de Gurus de Programação de Jogos</em> <sub>(ISBN: 0672305070)</sub>, e um<a href="http://www.shinelife.co.uk/java-maze/"> jaspe raycaster</a> que encontrei online, filtrado através da minha compulsão de renomear tudo para que faça sentido </span><span title="to me, and all the tinkering that had to be done to make things work well.
+">Para mim, e todos os ajustes que tinham que ser feitos para fazer as coisas funcionarem bem.</span></span></p>
+
+<p> </p>
+
+<h1 id="Resultados"><strong>Resultados</strong></h1>
+
+<p> </p>
+
+<p><br>
+ <span title="The canvas in Safari 2.0.1 performed surprisingly well.">A tela no Safari 2.0.1 apresentou surpreendentemente bem. </span><span title="With the blockiness factor cranked up to render slivers 8 pixels wide, I can run a 320 x 240 window at 24 fps on my Apple mini.">Com o fator de bloqueio criado para produzir slivers 8 pixels de largura, eu posso executar uma janela de 320 x 240 em 24 fps no meu Apple mini. </span><span title="Firefox 1.5 Beta 1 is even faster;">Firefox 1.5 Beta 1 é ainda mais rápido; </span><span title="I can run 320 x 240 at 24 fps with 4 pixel slivers.">Eu posso executar 320 x 240 em 24 fps com 4 pixel slivers. </span><span title="Not exactly a new member of the ID software family, but pretty decent considering it's a fully interpreted environment, and I didn't have to worry about memory allocation or video modes or coding inner routines in assembler or anything.">Não exatamente um novo membro da família de software de ID, mas bastante decente considerando que é um ambiente totalmente interpretado, e eu não tenho que se preocupar com a alocação de memória ou modos de vídeo ou rotinas internas de codificação em assembler ou qualquer coisa. </span><span title="The code does attempt to be very efficient, using array look-ups of pre-computed values, but I'm no optimization guru, so things could probably be written faster.
+
+">O código tenta ser muito eficiente, usando pesquisas de matrizes de valores pré-calculados, mas não sou um guru de otimização, então as coisas provavelmente poderiam ser escritas mais rapidamente.</span><br>
+ <br>
+ <span title="Also, it leaves a lot to be desired in terms of trying to be any sort of game engine—there are no wall textures, no sprites, no doors, not even any teleporters to get to another level.">Além disso, deixa muito a desejar em termos de tentar ser qualquer tipo de motor de jogo - não há texturas de parede, não sprites, sem portas, nem mesmo teleportadores para chegar a outro nível. </span><span title="But I'm pretty confident all those things could be added given enough time.">Mas estou bastante confiante de que todas essas coisas poderiam ser adicionadas com tempo suficiente. </span><span title="The canvas API supports pixel copying of images, so textures seem feasible.">A API de tela aceita a cópia de pixels de imagens, portanto, as texturas parecem possíveis. </span><span title="I'll leave that for another article, probably from another person.">Vou deixar isso para outro artigo, provavelmente de outra pessoa. </span><span title="=)
+">=)</span></p>
+
+<p> </p>
+
+<h2 id="O_ray-caster"><strong>O ray-caster</strong></h2>
+
+<p> </p>
+
+<p><br>
+ <span title="The nice people here have manually copied my files up so you can take a look, and for your hacking enjoyment I've posted the individual file contents as code listings (see below).
+
+">As pessoas agradáveis ​​aqui têm copiado manualmente meus arquivos para que você possa dar uma olhada, e para o seu prazer de hacking eu postei o conteúdo do arquivo individual como listagem de código (veja abaixo).</span><br>
+ <br>
+ <span title="So there you are, fire up Safari 1.3+ or Firefox 1.5+ or some other browser that supports the &lt;canvas> element and enjoy!">Então você está lá, o fogo até Safari 1.3 ou Firefox 1.5 ou outro navegador que suporta o elemento &lt;canvas&gt; e divirta-se!</span><br>
+ <br>
+ <small><a href="https://github.com/mdn/canvas-raycaster/blob/master/input.js">input.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Level.js">Level.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Player.js">Player.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/index.html">RayCaster.html</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/RayCaster.js">RayCaster.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.css">trace.css</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.js">trace.js</a> </small></p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li>
+</ul>
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>&lt;canvas&gt;</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">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>O método {{domxref("Document.getElementById()")}} pega uma referência para o elemento HTML <code>&lt;canvas&gt;</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>&lt;canvas&gt;</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>&lt;canvas&gt;</code> quando inclui-se um script do projeto Explorer Canvas, da google. Google Chrome e Opera 9 também suportam <code>&lt;canvas&gt;</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>