blob: 98c8233b1e06c98094a8a1f58c433ec98150d45f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
---
title: Tutorial do Canvas
slug: Tutorial_do_Canvas
tags:
- 'HTML:Canvas'
- Tutoriais
- Tutorial_do_Canvas
---
<p><img align="right" alt="" class=" internal" src="/@api/deki/files/2529/=Canvas_tut_examples.jpg"><strong> O <code><a href="/pt/HTML/Canvas" title="pt/HTML/Canvas"><canvas></a></code></strong> é um elemento <a href="/pt/HTML" title="pt/HTML">HTML</a> novo que pode ser usado para desenhar gráficos através de linguagens de guião (normalmente <a href="/pt/JavaScript" title="pt/JavaScript">JavaScript</a>). Ele pode, por exemplo, ser usado para desenhar gráficos, fazer composição de fotografias ou animações <span>(simples e <a href="/pt/Um_RayCaster_Básico">não tão simples</a>)</span>. A imagem à direita apresenta alguns exemplos de implementações de <code><canvas></code> que veremos mais adiante neste tutorial.</p>
<p>O <code><canvas></code> foi inicialmente apresentado pela Apple para o <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Mac OS X Dashboard</a> e mais tarde implementado no Safari. Os navegadores baseados no <a href="/pt/Gecko" title="pt/Gecko">Gecko</a> 1.8, tal como o Firefox 1.5, também suportam este elemento. O elemento <code><canvas></code> faz parte das específicações <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a>, também conhecidas como HTML 5.</p>
<p>Neste tutorial eu vou tentar descrever como implementar o elemento <code><canvas></code> nas suas páginas HTML. Os exemplos apresentados devem dar umas boas ideias sobre o que é que se pode fazer com <code><canvas></code> e podem ser usados para começar a construir outras implementações.</p>
<h3 id="Antes_de_come.C3.A7ar">Antes de começar</h3>
<p>O uso do elemento <code><canvas></code> não é muito difícil mas para isso é preciso possuir um conhecimento básico de <a href="/pt/HTML" title="pt/HTML">HTML</a> e <a href="/pt/JavaScript" title="pt/JavaScript">JavaScript</a>.</p>
<p>Como foi dito acima, o elemento <code><canvas></code> não é suportado em todos os navegadores modernos. Por consequência, para ver os exemplos será necessário usar o Firefox ou outro navegador baseado no Gecko tal como o Opera ou o Safari.</p>
<h3 id="Neste_Tutorial">Neste Tutorial</h3>
<ul> <li><a href="/pt/Tutorial_do_Canvas/Utilização_básica" title="pt/Tutorial_do_Canvas/Utilização_básica">Utilização básica</a></li> <li><a href="/pt/Tutorial_do_Canvas/Formas_de_desenho" title="pt/Tutorial_do_Canvas/Formas_de_desenho">Formas de desenho</a></li> <li><a href="/pt/Tutorial_do_Canvas/O_uso_de_imagens" title="pt/Tutorial_do_Canvas/O_uso_de_imagens">O uso de imagens</a></li> <li><a href="/pt/Tutorial_do_Canvas/Aplicar_estilos_e_cores" title="pt/Tutorial_do_Canvas/Aplicar_estilos_e_cores">Aplicar estilos e cores</a></li> <li><a href="/pt/Tutorial_do_Canvas/Transformações" title="pt/Tutorial_do_Canvas/Transformações">Transformações</a></li> <li><a href="/pt/Tutorial_do_Canvas/Composições" title="pt/Tutorial_do_Canvas/Composições">Composições</a></li> <li><a href="/pt/Tutorial_do_Canvas/Animações_básicas" title="pt/Tutorial_do_Canvas/Animações_básicas">Animações básicas</a></li>
</ul>
<h3 id="Ver_tamb.C3.A9m">Ver também</h3>
<ul> <li><a href="/pt/HTML/Canvas" title="pt/HTML/Canvas">A página do tópico Canvas</a></li> <li><a href="/pt/Desenhar_Gráficos_com_Canvas" title="pt/Desenhar_Gráficos_com_Canvas">Desenhar Gráficos com Canvas</a></li> <li><a href="/Special:Tags?tag=Exemplos_Canvas&language=pt" title="Special:Tags?tag=Exemplos_Canvas&language=pt">Exemplos Canvas</a></li>
</ul>
<p>{{ Next("Canvas tutorial:Basic usage") }}</p>
<p><span>Categorias</span></p>
<p><span>Interwiki Language Links</span></p>
<p>{{ languages( { "en": "en/Canvas_tutorial", "fr": "fr/Tutoriel_canvas", "ja": "ja/Canvas_tutorial", "ko": "ko/Canvas_tutorial", "pl": "pl/Przewodnik_po_canvas", "zh-cn": "cn/Canvas_tutorial" } ) }}</p>
|
