files/pt-br/web/api/canvas_api/tutorial/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

---
title: Canvas tutorial
slug: Web/API/Canvas_API/Tutorial
tags:
  - Canvas
  - Graphics
  - Guide
  - HTML
  - HTML5
  - Intermediate
  - Web
translation_of: Web/API/Canvas_API/Tutorial
original_slug: Web/Guide/HTML/Canvas_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/">Plug-in Canvas para Adobe Illustrator</a></li>
 <li><a class="external external-icon" href="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>