unslug pt-br: move

1 files changed, 153 insertions, 0 deletions

diff --git a/files/pt-br/web/api/canvas_api/tutorial/basic_usage/index.html b/files/pt-br/web/api/canvas_api/tutorial/basic_usage/index.html
new file mode 100644
index 0000000000..767a5ff97c
--- /dev/null
+++ b/files/pt-br/web/api/canvas_api/tutorial/basic_usage/index.html
@@ -0,0 +1,153 @@
+---
+title: Utilização básica do Canvas
+slug: Web/Guide/HTML/Canvas_tutorial/Utilizacao_basica
+tags:
+  - Canvas
+  - HTML
+  - Intermediário
+  - Tutorial
+  - graficos
+translation_of: Web/API/Canvas_API/Tutorial/Basic_usage
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</div>
+
+<div class="summary"><span id="result_box" lang="pt"><span>Vamos começar este tutorial olhando para o elemento </span></span> {{HTMLElement("canvas")}} {{Glossary("HTML")}} <span lang="pt"><span> em si.</span> <span>No final desta página, você saberá como configurar um contexto de canvas 2D e desenhar um primeiro exemplo em seu navegador.</span></span></div>
+
+<h2 id="O_elemento_&lt;canvas>">O elemento <code>&lt;canvas&gt;</code></h2>
+
+<p>Vamos começar esse tutorial olhando o elemento  {{HTMLElement("canvas")}} em si.</p>
+
+<pre class="brush: html">&lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Se parece muito com o elemento <code>&lt;img&gt; </code>com a diferença de não possuir os atributos <code>src</code> e <code>alt</code>. O elemento <code>&lt;canvas&gt;</code> tem apenas dois atributos - <em><strong>width</strong> </em>e <em><strong>height</strong>. </em>Ambos são opcionais e podem ser aplicados utilizando as propriedades <a href="/en-US/docs/DOM" rel="internal" title="en/DOM">DOM</a> respectivas. Se não forem especificados, o canvas será iniciado com <strong>300 <em>pixels</em></strong><em> </em>de largura por <strong>150 <em>pixels</em></strong><em> </em>de altura. O elemento pode ser redimensionado por <a href="/en-US/docs/Web/CSS" rel="internal" title="en/CSS">CSS</a>, mas durante a renderização a imagem é escalonada para caber no tamanho do layout.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Se as suas renderizações parecerem distorcidas, tente especificar os atributos <code>width</code> e <code>height</code> no <code>&lt;canvas&gt;</code> e não usando CSS.</p>
+</div>
+
+<p>O atributo <code>id</code> não é específico do elemento <code>&lt;canvas&gt;</code> mas um dos atributos padrão do HTML que pode ser aplicado em (quase) todos os elementos HTML (como o <em><code>class</code> </em>por exemplo). É sempre uma boa ideia inserir um <code>id</code> pois fica muito mais fácil de capturar o elemento no seu <em>script.</em></p>
+
+<p>O elemento <code>&lt;canvas&gt;</code> pode ser estilizado como qualquer imagem (margem, borda, fundo, etc). Contudo, essas regras não afetarão o desenho no canvas. Nós veremos como isso é feito a seguir nesse tutorial. Quando nenhuma regra de estilo for aplicada, o canvas iniciará totalmente transparente.</p>
+
+<div id="section_2">
+<h3 id="Conteúdo_alternativo">Conteúdo alternativo</h3>
+
+<p>Uma vez que alguns navegadores mais antigos (em particular, versões do Internet Explorer anteriores a 9) não suportam o elemento {{HTMLElement("canvas")}}, você precisará prover um conteúdo alternativo para ser mostrado nesses navegadores.</p>
+
+<p>Isto é muito simples: basta inserir o conteúdo alternativo dentro do elemento <code>&lt;canvas&gt;</code>. Navegadores que não suportam o <code>&lt;canvas&gt;</code> irão renderizar o conteúdo alternativo. Já os navegadores que suportam <code>&lt;canvas&gt;</code> irão ignorar o conteúdo alternativo, renderizando o canvas normalmente.</p>
+
+<p>Por exemplo, podemos prover um texto descritivo do canvas ou uma imagem estática do conteúdo. Algo como isto:</p>
+
+<pre class="brush: html">&lt;canvas id="stockGraph" width="150" height="150"&gt;
+  preço das ações: $3.15 +0.15
+&lt;/canvas&gt;
+
+&lt;canvas id="clock" width="150" height="150"&gt;
+  &lt;img src="images/clock.png" width="150" height="150" alt=""/&gt;
+&lt;/canvas&gt;
+</pre>
+
+<h3 id="Tag_&lt;canvas>_é_necessária">Tag <code>&lt;/canvas&gt;</code> é necessária</h3>
+
+<p>Ao contrário do elemento {{HTMLElement("img")}}, o elemento {{HTMLElement("canvas")}} a tag de fechamento <span style="line-height: 1.5;">(</span><code style="font-style: normal; line-height: 1.5;">&lt;/canvas&gt;</code><span style="line-height: 1.5;">)</span><span style="line-height: 1.5;"> é necessária</span><span style="line-height: 1.5;">.</span></p>
+
+<div class="note">
+<p><strong>Nota:</strong> Embora as primeiras versões do navegador Safari da Apple não exijam a tag de fechamento, a especificação indica que ela é necessária para <span style="line-height: 1.5;">que haja maior compatibilidade, </span><span style="line-height: 1.5;">portanto não se esqueça de incluí-la. Essas versões do Safari (antes da versão 2.0) irão processar o conteúdo do alternativo, além da própria tela, a menos que você use o CSS para mascará-lo. Felizmente, os usuários dessas versões do Safari são raros hoje em dia.</span></p>
+</div>
+
+<p>Se o conteúdo alternativo não for necessário, um simples <code>&lt;canvas id="foo" ...&gt;&lt;/canvas&gt;</code> é totalmente compatível com todos os navegadores que suportam canvas.</p>
+
+<h2 id="O_contexto_de_renderização">O contexto de renderização</h2>
+
+<p>{{HTMLElement("canvas")}} cria uma superfície de desenho de tamanho fixo que expõe um ou mais contextos de renderização, que são usados ​​para criar e manipular o conteúdo mostrado. Vamos nos concentrar no contexto de renderização 2D. Outros contextos podem fornecer diferentes tipos de renderização; por exemplo, <a href="/pt-BR/docs/Web/WebGL" style="line-height: 1.5;" title="/en-US/docs/Web/WebGL">WebGL</a> <span style="line-height: 1.5;">usa um contexto 3D ("experimental-WebGL") baseado em </span><a class="external" href="http://www.khronos.org/opengles/" rel="external" title="http://en.wikipedia.org/wiki/OpenGL_ES">OpenGL ES</a><span style="line-height: 1.5;">.</span></p>
+
+<p>Incialmente o canvas é branco. Para mostrar alguma coisa, primeiro um <em>script </em>precisa acessar o contexto de renderização e desenhar sobre ele. O elemento {{HTMLElement("canvas")}} tem um <a href="/en-US/docs/Web/API/HTMLCanvasElement#Methods">método</a> chamado <code>getContext()</code>, usado para obter o contexto de renderização e suas funções de desenho. <code>getContext()</code> recebe o tipo de contexto como parâmetro. Para gráficos 2D, que serão abrangidos nesse tutorial, deverá ser especificado "2d".</p>
+
+<pre class="brush: js">var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');
+</pre>
+
+<p>A primeira linha recupera o nó DOM do elemento {{HTMLElement ("canvas")}} chamando o método {{domxref ("document.getElementById()")}}. Depois de ter o nó do elemento, podemos acessar o contexto de desenho usando o método <code>getContext()</code>.</p>
+
+<div id="section_5">
+<h2 id="Verificação_de_suporte">Verificação de suporte</h2>
+
+<p>O conteúdo alternativo é mostrado nos navegadores que não suportam o elemento {{HTMLElement("canvas")}}, mas essa checagem pode ser feita através de um <em>script</em> simplesmente testando a presença do método <code>getContext():</code></p>
+
+<pre class="brush: js">var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext){
+  var ctx = canvas.getContext('2d');
+  // codigo de desenho aqui
+} else {
+  // codigo para quando o canvas nao for suportado aqui
+}
+</pre>
+</div>
+</div>
+
+<h2 id="Um_modelo_de_estrutura">Um modelo de estrutura</h2>
+
+<p>Aqui, um modelo minimalista, que vamos usar como ponto de partida para os exemplos posteriores:</p>
+
+<div class="note">
+<p><strong>Nota:</strong> <span id="result_box" lang="pt"><span>não é uma boa prática incorporar um script dentro do HTML.</span> <span>Nós fazemos isso aqui para manter o exemplo conciso</span></span>.</p>
+</div>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Canvas tutorial&lt;/title&gt;
+    &lt;script type="text/javascript"&gt;
+      function draw(){
+        var canvas = document.getElementById('tutorial');
+        if (canvas.getContext){
+          var ctx = canvas.getContext('2d');
+        }
+      }
+    &lt;/script&gt;
+    &lt;style type="text/css"&gt;
+      canvas { border: 1px solid black; }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body onload="draw();"&gt;
+    &lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>O <em>script </em>inclui a função chamada draw(), que é executada uma vez ao término do carregamento da página; este exemplo usa o evento <em>onload </em>do documento. Essa função, ou uma parecida, poderia usar {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou qualquer outro manipulador de evento, contanto que a página tenha sido carregada primeiro.</p>
+
+<p>{{EmbedLiveSample("Um_modelo_de_estrutura", 160, 160)}}</p>
+
+<h2 id="Um_simples_exemplo">Um simples exemplo</h2>
+
+<p>Para começar, vamos dar uma olhada num exemplo simples que desenha a interseção de dois retângulos, dos quais um deles tem uma transparência. Exploraremos em mais detalhes o funcionamento nos exemplos posteriores.</p>
+
+<pre class="brush: html">&lt;html&gt;
+ &lt;head&gt;
+  &lt;script type="application/javascript"&gt;
+    function draw() {
+      var canvas = document.getElementById("canvas");
+      if (canvas.getContext) {
+        var ctx = canvas.getContext("2d");
+
+        ctx.fillStyle = "rgb(200,0,0)";
+        ctx.fillRect (10, 10, 55, 50);
+
+        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+        ctx.fillRect (30, 30, 55, 50);
+      }
+    }
+  &lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Este exemplo parece assim:</p>
+
+<p>{{EmbedLiveSample("Um_simples_exemplo", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p>
+
+<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Drawing_shapes")}}</p>