aboutsummaryrefslogtreecommitdiff
path: root/files/pt-pt/tutorial_do_canvas
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 14:50:24 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 14:50:24 +0100
commit2c2df5ea01eb5cd8b9ea226b2869337e59c5fe3e (patch)
tree86ab4534d10092b293d4b7ab169fe1a8a2421bfa /files/pt-pt/tutorial_do_canvas
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-2c2df5ea01eb5cd8b9ea226b2869337e59c5fe3e.tar.gz
translated-content-2c2df5ea01eb5cd8b9ea226b2869337e59c5fe3e.tar.bz2
translated-content-2c2df5ea01eb5cd8b9ea226b2869337e59c5fe3e.zip
unslug pt-pt: move
Diffstat (limited to 'files/pt-pt/tutorial_do_canvas')
-rw-r--r--files/pt-pt/tutorial_do_canvas/formas_de_desenho/index.html8
-rw-r--r--files/pt-pt/tutorial_do_canvas/index.html24
-rw-r--r--files/pt-pt/tutorial_do_canvas/utilização_básica/index.html23
3 files changed, 0 insertions, 55 deletions
diff --git a/files/pt-pt/tutorial_do_canvas/formas_de_desenho/index.html b/files/pt-pt/tutorial_do_canvas/formas_de_desenho/index.html
deleted file mode 100644
index e23701e72d..0000000000
--- a/files/pt-pt/tutorial_do_canvas/formas_de_desenho/index.html
+++ /dev/null
@@ -1,8 +0,0 @@
----
-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/tutorial_do_canvas/index.html b/files/pt-pt/tutorial_do_canvas/index.html
deleted file mode 100644
index 98c8233b1e..0000000000
--- a/files/pt-pt/tutorial_do_canvas/index.html
+++ /dev/null
@@ -1,24 +0,0 @@
----
-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">&lt;canvas&gt;</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>&lt;canvas&gt;</code> que veremos mais adiante neste tutorial.</p>
-<p>O <code>&lt;canvas&gt;</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>&lt;canvas&gt;</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>&lt;canvas&gt;</code> nas suas páginas HTML. Os exemplos apresentados devem dar umas boas ideias sobre o que é que se pode fazer com <code>&lt;canvas&gt;</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>&lt;canvas&gt;</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>&lt;canvas&gt;</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&amp;language=pt" title="Special:Tags?tag=Exemplos_Canvas&amp;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/tutorial_do_canvas/utilização_básica/index.html b/files/pt-pt/tutorial_do_canvas/utilização_básica/index.html
deleted file mode 100644
index 489af34137..0000000000
--- a/files/pt-pt/tutorial_do_canvas/utilização_básica/index.html
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: Utilização básica
-slug: Tutorial_do_Canvas/Utilização_básica
----
-<h2 id="O_Elemento_&lt;canvas>">O Elemento <code>&lt;canvas&gt;</code></h2>
-<p>Vamos iniciar este tutorial olhando para o elemento <code>&lt;canvas&gt;</code>.</p>
-<pre>&lt;canvas id="tutorial" width="150" height="150"&gt;&lt;canvas&gt;
-</pre>
-<p>Isto se parece com o elemento <code>&lt;img&gt;</code>, a única diferença é que não tem os atributos <code>src</code> e <code>alt</code>. O elemento <code>&lt;canvas&gt;</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>&lt;canvas&gt;</code>, e não via CSS).</p>
-<p>O atributo <code>id</code> não é específico do elemeto <code>&lt;canvas&gt;</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>&lt;canvas&gt;</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>&lt;canvas&gt;</code>, ela será totalmente transparente.</p>
-<h3 id="Conteúdo_alternativo">Conteúdo alternativo</h3>
-<p>Por ser relativamente novo, o elemento <code>&lt;canvas&gt;</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>&lt;canvas&gt;</code>. Navegadores que não suportam <code>&lt;canvas&gt;</code> irão ignorar o elemento e renderizar o conteúdo interno. Navegadores que suportam <code>&lt;canvas&gt;</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>&lt;canvas id="grafEstoque" width="150" height="150"&gt;
-  Preço atual do estoque: $3,15 +0,15
-&lt;/canvas&gt;
-
-&lt;canvas id="relogio" width="150" height="150"&gt;
-  &lt;img src="imagens/relogio.png" width="150" height="150" /&gt;
-&lt;/canvas&gt;
-</pre>