From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../formas_de_desenho/index.html | 8 ++++++++ files/pt-pt/tutorial_do_canvas/index.html | 24 ++++++++++++++++++++++ .../index.html" | 23 +++++++++++++++++++++ 3 files changed, 55 insertions(+) create mode 100644 files/pt-pt/tutorial_do_canvas/formas_de_desenho/index.html create mode 100644 files/pt-pt/tutorial_do_canvas/index.html create mode 100644 "files/pt-pt/tutorial_do_canvas/utiliza\303\247\303\243o_b\303\241sica/index.html" (limited to 'files/pt-pt/tutorial_do_canvas') 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 new file mode 100644 index 0000000000..e23701e72d --- /dev/null +++ b/files/pt-pt/tutorial_do_canvas/formas_de_desenho/index.html @@ -0,0 +1,8 @@ +--- +title: Formas de desenho +slug: Tutorial_do_Canvas/Formas_de_desenho +--- +

A Grade

+

Antes de começar a desenhar, nós precisamos falar um pouco sobre o sistema de cordenadas. 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.

+

Desenhado formas

+

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.

diff --git a/files/pt-pt/tutorial_do_canvas/index.html b/files/pt-pt/tutorial_do_canvas/index.html new file mode 100644 index 0000000000..98c8233b1e --- /dev/null +++ b/files/pt-pt/tutorial_do_canvas/index.html @@ -0,0 +1,24 @@ +--- +title: Tutorial do Canvas +slug: Tutorial_do_Canvas +tags: + - 'HTML:Canvas' + - Tutoriais + - Tutorial_do_Canvas +--- +

O <canvas> é um elemento HTML novo que pode ser usado para desenhar gráficos através de linguagens de guião (normalmente JavaScript). Ele pode, por exemplo, ser usado para desenhar gráficos, fazer composição de fotografias ou animações (simples e não tão simples). A imagem à direita apresenta alguns exemplos de implementações de <canvas> que veremos mais adiante neste tutorial.

+

O <canvas> foi inicialmente apresentado pela Apple para o Mac OS X Dashboard e mais tarde implementado no Safari. Os navegadores baseados no Gecko 1.8, tal como o Firefox 1.5, também suportam este elemento. O elemento <canvas> faz parte das específicações WhatWG Web applications 1.0, também conhecidas como HTML 5.

+

Neste tutorial eu vou tentar descrever como implementar o elemento <canvas> nas suas páginas HTML. Os exemplos apresentados devem dar umas boas ideias sobre o que é que se pode fazer com <canvas> e podem ser usados para começar a construir outras implementações.

+

Antes de começar

+

O uso do elemento <canvas> não é muito difícil mas para isso é preciso possuir um conhecimento básico de HTML e JavaScript.

+

Como foi dito acima, o elemento <canvas> 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.

+

Neste Tutorial

+ +

Ver também

+ +

{{ Next("Canvas tutorial:Basic usage") }}

+

Categorias

+

Interwiki Language Links

+

{{ 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" } ) }}

diff --git "a/files/pt-pt/tutorial_do_canvas/utiliza\303\247\303\243o_b\303\241sica/index.html" "b/files/pt-pt/tutorial_do_canvas/utiliza\303\247\303\243o_b\303\241sica/index.html" new file mode 100644 index 0000000000..489af34137 --- /dev/null +++ "b/files/pt-pt/tutorial_do_canvas/utiliza\303\247\303\243o_b\303\241sica/index.html" @@ -0,0 +1,23 @@ +--- +title: Utilização básica +slug: Tutorial_do_Canvas/Utilização_básica +--- +

O Elemento <canvas>

+

Vamos iniciar este tutorial olhando para o elemento <canvas>.

+
<canvas id="tutorial" width="150" height="150"><canvas>
+
+

Isto se parece com o elemento <img>, a única diferença é que não tem os atributos src e alt. O elemento <canvas> tem apenas dois atriburos - width e height. Estes são opcionais e podem ser mudados usando propriedades do DOM. Quando não configurados os valores de width e height, a largura será de 300 pixels e a altura será de 150 pixels. O elemento pode ser redimensionado árbitrariamente usando CSS, 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 <canvas>, e não via CSS).

+

O atributo id não é específico do elemeto <canvas>, 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 id porque fica fácil de identificar o elemento no script.

+

O elemento <canvas> 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 à <canvas>, ela será totalmente transparente.

+

Conteúdo alternativo

+

Por ser relativamente novo, o elemento <canvas> 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.

+

Isto é muito fácil: nós apenas adicionamos o conteúdo alternativo dentro do elemento <canvas>. Navegadores que não suportam <canvas> irão ignorar o elemento e renderizar o conteúdo interno. Navegadores que suportam <canvas> irão ignorar o conteúdo interno e renderizar o elemento normalmente.

+

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:

+
<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>
+
-- cgit v1.2.3-54-g00ecf