Revision 268077 of Utilização básica

  • Slug da revisão: Tutorial_do_Canvas/Utilização_básica
  • Título da revisão: Utilização básica
  • ID da revisão: 268077
  • Criado:
  • Autor: guerreirogabriel
  • É revisão atual? Sim
  • Comentário 442 words added

Conteúdo da revisão

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>

Fonte da revisão

<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.C3.BAdo_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>
Reverter para esta revisão