diff options
Diffstat (limited to 'files/pt-pt/orphaned/tutorial_do_canvas')
3 files changed, 55 insertions, 0 deletions
diff --git a/files/pt-pt/orphaned/tutorial_do_canvas/formas_de_desenho/index.html b/files/pt-pt/orphaned/tutorial_do_canvas/formas_de_desenho/index.html new file mode 100644 index 0000000000..e23701e72d --- /dev/null +++ b/files/pt-pt/orphaned/tutorial_do_canvas/formas_de_desenho/index.html @@ -0,0 +1,8 @@ +--- +title: Formas de desenho +slug: Tutorial_do_Canvas/Formas_de_desenho +--- +<h2 id="A_Grade">A Grade</h2> +<p>Antes de começar a desenhar, nós precisamos falar um pouco sobre o <em>sistema de cordenadas</em>. No início da página anterior há um template de 150x150. Eu desenhei a grade padrão. Normalmente 1 unidade na grade corresponde à 1 pixel na tela. A origem da grade está posicionada no canto superior esquerdo (cordenada (0; 0)). Todos os elementos são posicionados pela sua origem. Então a posição do canto superior esquerdo do quadrado azul está em x pixels da esquerda e y pixels de cima (cordenada (x; y)). Mais tarde neste tutorial, nós veremos como reposicionar esta origem, rodar a grade e redimensionar. Por enquanto, trabalharemos com os padróes.</p> +<h2 id="Desenhado_formas">Desenhado formas</h2> +<p>Diferente do SVG, o canvas suporta apenas uma forma primitiva - retângulos. Todas as outras formas devem ser criadas combinando uma ou mais formas. Por sorte, nós temos uma coleção de funções de desenho de formas que permite a composição de forma altamente complexas.</p> diff --git a/files/pt-pt/orphaned/tutorial_do_canvas/index.html b/files/pt-pt/orphaned/tutorial_do_canvas/index.html new file mode 100644 index 0000000000..98c8233b1e --- /dev/null +++ b/files/pt-pt/orphaned/tutorial_do_canvas/index.html @@ -0,0 +1,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> diff --git a/files/pt-pt/orphaned/tutorial_do_canvas/utilização_básica/index.html b/files/pt-pt/orphaned/tutorial_do_canvas/utilização_básica/index.html new file mode 100644 index 0000000000..489af34137 --- /dev/null +++ b/files/pt-pt/orphaned/tutorial_do_canvas/utilização_básica/index.html @@ -0,0 +1,23 @@ +--- +title: Utilização básica +slug: Tutorial_do_Canvas/Utilização_básica +--- +<h2 id="O_Elemento_<canvas>">O Elemento <code><canvas></code></h2> +<p>Vamos iniciar este tutorial olhando para o elemento <code><canvas></code>.</p> +<pre><canvas id="tutorial" width="150" height="150"><canvas> +</pre> +<p>Isto se parece com o elemento <code><img></code>, a única diferença é que não tem os atributos <code>src</code> e <code>alt</code>. O elemento <code><canvas></code> tem apenas dois atriburos - <strong>width</strong> e <strong>height</strong>. Estes são opcionais e podem ser mudados usando propriedades do <a href="/pt/DOM" title="pt/DOM">DOM</a>. Quando não configurados os valores de width e height, a largura será de <strong>300 pixels</strong> e a altura será de <strong>150 pixels</strong>. O elemento pode ser redimensionado árbitrariamente usando <a href="/pt/CSS" title="pt/CSS">CSS</a>, mas durante a renderização a imagem será redimensionada para preencher o tamanho total do elemento (Se a renderização parecer distorcida, tente mudar os valores de width e height do elemento <code><canvas></code>, e não via CSS).</p> +<p>O atributo <code>id</code> não é específico do elemeto <code><canvas></code>, mas é um dos atributos padrão do HTML que pode ser aplicato à (quase) todos os elementos HTML. É sempre uma boa idéia adicionar o atributo <code>id</code> porque fica fácil de identificar o elemento no script.</p> +<p>O elemento <code><canvas></code> pode ser estilizado como qualquer imagem normal (margem, borda, fundo, etc). estas estilizações não afetam o desenho real da imagem. Nós veremos mais adiante neste tutorial. Quando nenhuma regra é aplicada à <code><canvas></code>, ela será totalmente transparente.</p> +<h3 id="Conteúdo_alternativo">Conteúdo alternativo</h3> +<p>Por ser relativamente novo, o elemento <code><canvas></code> não foi implementado em alguns navegadores (como no IE, antes da versão 9), os precisamos definir um conteúdo alternativo para navegadores que não suportam a tag.</p> +<p>Isto é muito fácil: nós apenas adicionamos o conteúdo alternativo dentro do elemento <code><canvas></code>. Navegadores que não suportam <code><canvas></code> irão ignorar o elemento e renderizar o conteúdo interno. Navegadores que suportam <code><canvas></code> irão ignorar o conteúdo interno e renderizar o elemento normalmente.</p> +<p>Por exemplo, nós podemos adicionar uma descrição de texto do elemento ou adicionar uma imagem estática do conteúdo dinâmicamente renderizado. Parecerá assim:</p> +<pre><canvas id="grafEstoque" width="150" height="150"> + Preço atual do estoque: $3,15 +0,15 +</canvas> + +<canvas id="relogio" width="150" height="150"> + <img src="imagens/relogio.png" width="150" height="150" /> +</canvas> +</pre> |