unslug pt-br: move

1 files changed, 56 insertions, 0 deletions

diff --git a/files/pt-br/web/api/canvas_api/tutorial/index.html b/files/pt-br/web/api/canvas_api/tutorial/index.html
new file mode 100644
index 0000000000..2f9dbab7df
--- /dev/null
+++ b/files/pt-br/web/api/canvas_api/tutorial/index.html
@@ -0,0 +1,56 @@
+---
+title: Canvas tutorial
+slug: Web/Guide/HTML/Canvas_tutorial
+tags:
+  - Canvas
+  - Graphics
+  - Guide
+  - HTML
+  - HTML5
+  - Intermediate
+  - Web
+translation_of: Web/API/Canvas_API/Tutorial
+---
+<p> {{CanvasSidebar}} <a href="/pt-BR/docs/Web/HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></p>
+
+<p class="summary"><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><strong><code>&lt;canvas&gt;</code></strong></a> é um elemento <a href="/en-US/docs/HTML" title="HTML">HTML</a> que pode ser usado para desenhar usando linguagem de "script" (normalmente <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>). Isto pode ser usado, por exemplo, para desenhar gráficos, fazer composições de fotos ou simples (e <a href="/en-US/docs/HTML/Canvas/A_Basic_RayCaster" title="A_Basic_RayCaster">não tão simples</a>) animações. As imagens à direita mostram exemplos de implementações <strong><code><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">&lt;canvas&gt;</a></code></strong> que serão parte deste tutorial.</p>
+
+<p><span class="seoSummary">Este tutorial descreve como utilizar o elemento <code>&lt;canvas&gt;</code> para desenhar gráficos 2D, iniciando com o básico. Os exemplos fornecidos devem lhe trazer algumas ideias claras sobre o que você pode fazer com o canvas e irá fornecer trechos de código que podem lhe ajudar na contrução do seu próprio conteúdo. </span></p>
+
+<p>Introduzido pela primeira vez no WebKit pela Apple para o OS X Dashboard, o <code>&lt;canvas&gt;</code>, desde então, tem sido implementado em navegadores. Hoje, todos os principais navegadores suportam isso.</p>
+
+<h2 id="Before_you_start" name="Before_you_start">Antes de começar</h2>
+
+<p>Usar o elemento <code>&lt;canvas&gt; </code>não é muito difícil, mas você precisa de um conhecimento básico sobre <a href="/en-US/docs/HTML" title="HTML">HTML</a> e <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>. O elemento <code>&lt;canvas&gt;</code> não é suportado por alguns navegadores antigos, mas é suportado em versões recentes da maioria dos navegadores. O tamanho padrão de um canvas é de 300px * 150px (largura * altura). Porém, tamanhos customizados podem ser definidos usando as propriedades <code>width</code> e <code>height</code> do CSS. Para desenhar gráficos no canvas iremos usar um contexto de objeto JavaScript, o que criará gráficos em tempo real.</p>
+
+<h2 id="In_this_tutorial" name="In_this_tutorial">Nesse tutorial</h2>
+
+<ul>
+ <li><a href="/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Utilizacao_basica" title="Canvas_tutorial/Basic_usage">Utilização básica</a></li>
+ <li><a href="/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">Desenhando formas</a></li>
+ <li><a href="/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">Aplicando estilos e cores</a></li>
+ <li><a href="/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_text">Desenhando texto</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images" title="Canvas_tutorial/Using_images">Usando imagens (em inglês)</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations" title="Canvas_tutorial/Transformations">Transformações</a></li>
+ <li><a href="/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Compositing" title="Canvas_tutorial/Compositing">Composição e recorte</a></li>
+ <li><a href="/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">Animações básicas</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">Animações avançadas</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Manipulação de pixel</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Regiões e acessibilidade</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">Otimizando o canvas</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Finale">Conclusão</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li><a href="/pt-BR/docs/Web/HTML/Canvas" title="HTML/Canvas">Canvas</a></li>
+ <li><a class="external external-icon" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Plug-in Canvas para Adobe Illustrator</a></li>
+ <li><a class="external external-icon" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a><a href="http://davidwalsh.name/convert-canvas-image"> </a></li>
+</ul>
+
+<h2 id="Nota_dos_contribuidores">Nota dos contribuidores</h2>
+
+<p><span id="result_box" lang="pt"><span>Devido a um erro técnico lamentável que ocorreu na semana de 17 de junho de 2013, perdemos parte do histórico deste tutorial, incluindo atribuições a todos os contribuidores anteriores ao seu conteúdo.</span> <span>Pedimos desculpas por isso, e espero que você nos perdoe desse infeliz infortúnio.</span></span></p>
+
+<div>{{ Next("Web/Guide/HTML/Canvas_tutorial/Utilizacao_basica") }}</div>