mozilla

Comparar revisões

Utilização básica

Change Revisions

Revisão 268076:

Revisão 268076 por Edgarlaguiar a

Revisão 268077:

Revisão 268077 por guerreirogabriel a

Título:
Utilização básica
Utilização básica
Slug:
Tutorial_do_Canvas/Utilização_básica
Tutorial_do_Canvas/Utilização_básica
Conteúdo:

Revisão 268076
Revisão 268077
tt7    <h2 id="O_Elemento_&lt;canvas&gt;">
8      O Elemento <code>&lt;canvas&gt;</code>
9    </h2>
10    <p>
11      Vamos iniciar este tutorial olhando para o elemento <code>&
 >lt;canvas&gt;</code>.
12    </p>
13    <pre>
14&lt;canvas id="tutorial" width="150" height="150"&gt;&lt;canvas&g
 >t;
15</pre>
16    <p>
17      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 <cod
 >e>alt</code>. O elemento <code>&lt;canvas&gt;</code> tem apenas d
 >ois 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 pixel
 >s</strong> e a altura será de <strong>150 pixels</strong>. O elem
 >ento 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 (S
 >e a renderização parecer distorcida, tente mudar os valores de wi
 >dth e height do elemento <code>&lt;canvas&gt;</code>, e não via C
 >SS).
18    </p>
19    <p>
20      O atributo <code>id</code> não é específico do elemeto <cod
 >e>&lt;canvas&gt;</code>, mas é um dos atributos padrão do HTML qu
 >e pode ser aplicato à (quase) todos os elementos HTML. É sempre u
 >ma boa idéia adicionar o atributo <code>id</code> porque fica fác
 >il de identificar o elemento no script.
21    </p>
22    <p>
23      O elemento <code>&lt;canvas&gt;</code> pode ser estilizado 
 >como qualquer imagem normal (margem, borda, fundo, etc). estas es
 >tilizaçõ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.
24    </p>
25    <h3 id="Conte.C3.BAdo_alternativo">
26      Conteúdo alternativo
27    </h3>
28    <p>
29      Por ser relativamente novo, o elemento <code>&lt;canvas&gt;
 ></code> não foi implementado em alguns navegadores (como no IE, a
 >ntes da versão 9), os precisamos definir um conteúdo alternativo 
 >para navegadores que não suportam a tag.
30    </p>
31    <p>
32      Isto é muito fácil: nós apenas adicionamos o conteúdo alter
 >nativo dentro do elemento <code>&lt;canvas&gt;</code>. Navegadore
 >s que não suportam <code>&lt;canvas&gt;</code> irão ignorar o ele
 >mento e renderizar o conteúdo interno. Navegadores que suportam <
 >code>&lt;canvas&gt;</code> irão ignorar o conteúdo interno e rend
 >erizar o elemento normalmente.
33    </p>
34    <p>
35      Por exemplo, nós podemos adicionar uma descrição de texto d
 >o elemento ou adicionar uma imagem estática do conteúdo dinâmicam
 >ente renderizado. Parecerá assim:
36    </p>
37    <pre>
38&lt;canvas id="grafEstoque" width="150" height="150"&gt;
39  Preço atual do estoque: $3,15 +0,15
40&lt;/canvas&gt;
41 
42&lt;canvas id="relogio" width="150" height="150"&gt;
43  &lt;img src="imagens/relogio.png" width="150" height="150" /&gt
 >;
44&lt;/canvas&gt;
45</pre>

Voltar ao Histórico